@@ -259,6 +259,115 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
259259
260260</div >
261261
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+
262371## Best Practices {#best-practices}
263372
264373### Getters should be side-effect free {#getters-should-be-side-effect-free}
0 commit comments