Skip to content

Commit fd21397

Browse files
fix: code style in reactivity-computed-watchers.md (#1126)
1 parent afc2a95 commit fd21397

File tree

1 file changed

+30
-30
lines changed

1 file changed

+30
-30
lines changed

src/guide/reactivity-computed-watchers.md

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,7 @@ An async function implicitly returns a Promise, but the cleanup function needs t
9595

9696
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:
9797

98-
```html
99-
98+
```vue
10099
<template>
101100
<div>{{ count }}</div>
102101
</template>
@@ -201,15 +200,15 @@ watch(count, (count, prevCount) => {
201200
A watcher can also watch multiple sources at the same time using an array:
202201

203202
```js
204-
const firstName = ref('');
205-
const lastName = ref('');
203+
const firstName = ref('')
204+
const lastName = ref('')
206205

207206
watch([firstName, lastName], (newValues, prevValues) => {
208-
console.log(newValues, prevValues);
207+
console.log(newValues, prevValues)
209208
})
210209

211-
firstName.value = "John"; // logs: ["John",""] ["", ""]
212-
lastName.value = "Smith"; // logs: ["John", "Smith"] ["John", ""]
210+
firstName.value = 'John' // logs: ["John", ""] ["", ""]
211+
lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
213212
```
214213

215214
### Watching Reactive Objects
@@ -222,71 +221,72 @@ const numbers = reactive([1, 2, 3, 4])
222221
watch(
223222
() => [...numbers],
224223
(numbers, prevNumbers) => {
225-
console.log(numbers, prevNumbers);
226-
})
224+
console.log(numbers, prevNumbers)
225+
}
226+
)
227227

228228
numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]
229229
```
230230

231231
Attempting to check for changes of properties in a deeply nested object or array will still require the `deep` option to be true:
232232

233233
```js
234-
const state = reactive({
235-
id: 1,
236-
attributes: {
237-
name: "",
238-
},
239-
});
234+
const state = reactive({
235+
id: 1,
236+
attributes: {
237+
name: ''
238+
}
239+
})
240240

241241
watch(
242242
() => state,
243243
(state, prevState) => {
244244
console.log(
245-
"not deep ",
245+
'not deep',
246246
state.attributes.name,
247247
prevState.attributes.name
248-
);
248+
)
249249
}
250-
);
250+
)
251251

252252
watch(
253253
() => state,
254254
(state, prevState) => {
255255
console.log(
256-
"deep ",
256+
'deep',
257257
state.attributes.name,
258258
prevState.attributes.name
259-
);
259+
)
260260
},
261261
{ deep: true }
262-
);
262+
)
263263

264-
state.attributes.name = "Alex"; // Logs: "deep " "Alex" "Alex"
264+
state.attributes.name = 'Alex' // Logs: "deep" "Alex" "Alex"
265265
```
266266

267267
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)
268268

269269
```js
270-
import _ from 'lodash';
270+
import _ from 'lodash'
271271

272272
const state = reactive({
273273
id: 1,
274274
attributes: {
275-
name: "",
276-
},
277-
});
275+
name: ''
276+
}
277+
})
278278

279279
watch(
280280
() => _.cloneDeep(state),
281281
(state, prevState) => {
282282
console.log(
283-
state.attributes.name,
283+
state.attributes.name,
284284
prevState.attributes.name
285-
);
285+
)
286286
}
287-
);
287+
)
288288

289-
state.attributes.name = "Alex"; // Logs: "Alex" ""
289+
state.attributes.name = 'Alex' // Logs: "Alex" ""
290290
```
291291

292292
### Shared Behavior with `watchEffect`

0 commit comments

Comments
 (0)