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 ` +## 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: + +
+ +```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; + } + } +} +``` +
+ +
+ +```vue + +``` +
+ +In case you're using a writable computed: + +
+ +```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; + } + } + } +} +``` + +
+
+ +```vue + +``` + +
+ + ## Best Practices {#best-practices} ### Getters should be side-effect free {#getters-should-be-side-effect-free}