From 4567e55ee0641e0a9501f89621c1e641cb6cec25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Fri, 27 Sep 2024 18:20:22 +0200
Subject: [PATCH] feat(guide/computed): add previous to computed (#3001)

* feat(guide/computed): add previous to computed

Signed-off-by: GitHub <noreply@github.com>

* fix: replace badge with list item

* refactor: address review comments

* Update src/guide/essentials/computed.md

* Update src/guide/essentials/computed.md

---------

Signed-off-by: GitHub <noreply@github.com>
Co-authored-by: Natalia Tepluhina <tarya.se@gmail.com>
---
 src/guide/essentials/computed.md | 109 +++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)

diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md
index 60055f06fc..335ec34d05 100644
--- a/src/guide/essentials/computed.md
+++ b/src/guide/essentials/computed.md
@@ -259,6 +259,115 @@ Now when you run `fullName.value = 'John Doe'`, the setter will be invoked and `
 
 </div>
 
+## Getting the previous value {#previous}
+
+- Only supported in 3.4+
+
+In case you need it, you can get the previous value returned by the computed property accessing
+the first argument of the getter:
+
+<div class="options-api">
+
+```js
+export default {
+  data() {
+    return {
+      count: 2
+    }
+  },
+  computed: {
+    // This computed will return the value of count when it's less or equal to 3.
+    // When count is >=4, the last value that fulfilled our condition will be returned
+    // instead until count is less or equal to 3
+    alwaysSmall(previous) {
+      if (this.count <= 3) {
+        return this.count;
+      }
+
+      return previous;
+    }
+  }
+}
+```
+</div>
+
+<div class="composition-api">
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const count = ref(2)
+
+// This computed will return the value of count when it's less or equal to 3.
+// When count is >=4, the last value that fulfilled our condition will be returned
+// instead until count is less or equal to 3
+const alwaysSmall = computed((previous) => {
+  if (count.value <= 3) {
+    return count.value;
+  }
+
+  return previous;
+})
+</script>
+```
+</div>
+
+In case you're using a writable computed:
+
+<div class="options-api">
+
+```js
+export default {
+  data() {
+    return {
+      count: 2
+    }
+  },
+  computed: {
+    alwaysSmall: {
+      get(previous) {
+        if (this.count <= 3) {
+          return this.count;
+        }
+
+        return previous;
+      },
+      set(newValue) {
+        this.count = newValue * 2;
+      }
+    }
+  }
+}
+```
+
+</div>
+<div class="composition-api">
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const count = ref(2)
+
+const alwaysSmall = computed({
+  get(previous) {
+    if (count.value <= 3) {
+      return count.value;
+    }
+
+    return previous;
+  },
+  set(newValue) {
+    count.value = newValue * 2;
+  }
+})
+</script>
+```
+
+</div>
+
+
 ## Best Practices {#best-practices}
 
 ### Getters should be side-effect free {#getters-should-be-side-effect-free}