@@ -259,6 +259,115 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
259
259
260
260
</div >
261
261
262
+ ## Getting the previous value {#previous}
263
+
264
+ - Only supported in 3.4+
265
+
266
+ In case you need it, you can get the previous value returned by the computed property accessing
267
+ the first argument of the getter:
268
+
269
+ <div class =" options-api " >
270
+
271
+ ``` js
272
+ export default {
273
+ data () {
274
+ return {
275
+ count: 2
276
+ }
277
+ },
278
+ computed: {
279
+ // This computed will return the value of count when it's less or equal to 3.
280
+ // When count is >=4, the last value that fulfilled our condition will be returned
281
+ // instead until count is less or equal to 3
282
+ alwaysSmall (previous ) {
283
+ if (this .count <= 3 ) {
284
+ return this .count ;
285
+ }
286
+
287
+ return previous;
288
+ }
289
+ }
290
+ }
291
+ ```
292
+ </div >
293
+
294
+ <div class =" composition-api " >
295
+
296
+ ``` vue
297
+ <script setup>
298
+ import { ref, computed } from 'vue'
299
+
300
+ const count = ref(2)
301
+
302
+ // This computed will return the value of count when it's less or equal to 3.
303
+ // When count is >=4, the last value that fulfilled our condition will be returned
304
+ // instead until count is less or equal to 3
305
+ const alwaysSmall = computed((previous) => {
306
+ if (count.value <= 3) {
307
+ return count.value;
308
+ }
309
+
310
+ return previous;
311
+ })
312
+ </script>
313
+ ```
314
+ </div >
315
+
316
+ In case you're using a writable computed:
317
+
318
+ <div class =" options-api " >
319
+
320
+ ``` js
321
+ export default {
322
+ data () {
323
+ return {
324
+ count: 2
325
+ }
326
+ },
327
+ computed: {
328
+ alwaysSmall: {
329
+ get (previous ) {
330
+ if (this .count <= 3 ) {
331
+ return this .count ;
332
+ }
333
+
334
+ return previous;
335
+ },
336
+ set (newValue ) {
337
+ this .count = newValue * 2 ;
338
+ }
339
+ }
340
+ }
341
+ }
342
+ ```
343
+
344
+ </div >
345
+ <div class =" composition-api " >
346
+
347
+ ``` vue
348
+ <script setup>
349
+ import { ref, computed } from 'vue'
350
+
351
+ const count = ref(2)
352
+
353
+ const alwaysSmall = computed({
354
+ get(previous) {
355
+ if (count.value <= 3) {
356
+ return count.value;
357
+ }
358
+
359
+ return previous;
360
+ },
361
+ set(newValue) {
362
+ count.value = newValue * 2;
363
+ }
364
+ })
365
+ </script>
366
+ ```
367
+
368
+ </div >
369
+
370
+
262
371
## Best Practices {#best-practices}
263
372
264
373
### Getters should be side-effect free {#getters-should-be-side-effect-free}
0 commit comments