Skip to content

[pull] indonesian from master #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 8, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 46 additions & 11 deletions src/guide/reactivity-computed-watchers.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,10 @@ We are registering the invalidation callback via a passed-in function instead of

```js
const data = ref(null)
watchEffect(async (onInvalidate) => {
onInvalidate(() => { /* ... */ }) // we register cleanup function before Promise resolves
watchEffect(async onInvalidate => {
onInvalidate(() => {
/* ... */
}) // we register cleanup function before Promise resolves
data.value = await fetchData(props.id)
})
```
Expand All @@ -101,19 +103,19 @@ Vue's reactivity system buffers invalidated effects and flushes them asynchronou
</template>

<script>
export default {
setup() {
const count = ref(0)
export default {
setup() {
const count = ref(0)

watchEffect(() => {
console.log(count.value)
})
watchEffect(() => {
console.log(count.value)
})

return {
count
}
return {
count
}
}
}
</script>
```

Expand Down Expand Up @@ -211,6 +213,39 @@ firstName.value = 'John' // logs: ["John", ""] ["", ""]
lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
```

However, if you are changing both watched sources simultaneously in the same method, the watcher will be executed only once:

```js{9-13}
setup() {
const firstName = ref('')
const lastName = ref('')

watch([firstName, lastName], (newValues, prevValues) => {
console.log(newValues, prevValues)
})

const changeValues = () => {
firstName.value = 'John'
lastName.value = 'Smith'
// logs: ["John", "Smith"] ["", ""]
}

return { changeValues }
}
```

Note that multiple synchronous changes will only trigger the watcher once.

It is possible to force the watcher to trigger after every change by using the setting `flush: 'sync'`, though that isn't usually recommended. Alternatively, [nextTick](/api/global-api.html#nexttick) can be used to wait for the watcher to run before making further changes. e.g.:

```js
const changeValues = async () => {
firstName.value = 'John' // logs: ["John", ""] ["", ""]
await nextTick()
lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
}
```

### Watching Reactive Objects

Using a watcher to compare values of an array or object that are reactive requires that it has a copy made of just the values.
Expand Down