diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md index 97f48ae241..e37b15e218 100644 --- a/src/guide/reactivity-computed-watchers.md +++ b/src/guide/reactivity-computed-watchers.md @@ -95,8 +95,7 @@ An async function implicitly returns a Promise, but the cleanup function needs t Vue's reactivity system buffers invalidated effects and flushes them asynchronously to avoid unnecessary duplicate invocation when there are many state mutations happening in the same "tick". Internally, a component's `update` function is also a watched effect. When a user effect is queued, it is by default invoked **before** all component `update` effects: -```html - +```vue @@ -201,15 +200,15 @@ watch(count, (count, prevCount) => { A watcher can also watch multiple sources at the same time using an array: ```js -const firstName = ref(''); -const lastName = ref(''); +const firstName = ref('') +const lastName = ref('') watch([firstName, lastName], (newValues, prevValues) => { - console.log(newValues, prevValues); + console.log(newValues, prevValues) }) -firstName.value = "John"; // logs: ["John",""] ["", ""] -lastName.value = "Smith"; // logs: ["John", "Smith"] ["John", ""] +firstName.value = 'John' // logs: ["John", ""] ["", ""] +lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""] ``` ### Watching Reactive Objects @@ -222,8 +221,9 @@ const numbers = reactive([1, 2, 3, 4]) watch( () => [...numbers], (numbers, prevNumbers) => { - console.log(numbers, prevNumbers); - }) + console.log(numbers, prevNumbers) + } +) numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4] ``` @@ -231,62 +231,62 @@ numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4] Attempting to check for changes of properties in a deeply nested object or array will still require the `deep` option to be true: ```js -const state = reactive({ - id: 1, - attributes: { - name: "", - }, -}); +const state = reactive({ + id: 1, + attributes: { + name: '' + } +}) watch( () => state, (state, prevState) => { console.log( - "not deep ", + 'not deep', state.attributes.name, prevState.attributes.name - ); + ) } -); +) watch( () => state, (state, prevState) => { console.log( - "deep ", + 'deep', state.attributes.name, prevState.attributes.name - ); + ) }, { deep: true } -); +) -state.attributes.name = "Alex"; // Logs: "deep " "Alex" "Alex" +state.attributes.name = 'Alex' // Logs: "deep" "Alex" "Alex" ``` However, watching a reactive object or array will always return a reference to the current value of that object for both the current and previous value of the state. To fully watch deeply nested objects and arrays, a deep copy of values may be required. This can be achieved with a utility such as [lodash.cloneDeep](https://lodash.com/docs/4.17.15#cloneDeep) ```js -import _ from 'lodash'; +import _ from 'lodash' const state = reactive({ id: 1, attributes: { - name: "", - }, -}); + name: '' + } +}) watch( () => _.cloneDeep(state), (state, prevState) => { console.log( - state.attributes.name, + state.attributes.name, prevState.attributes.name - ); + ) } -); +) -state.attributes.name = "Alex"; // Logs: "Alex" "" +state.attributes.name = 'Alex' // Logs: "Alex" "" ``` ### Shared Behavior with `watchEffect`