{string | Function} source{Function | Object} callback{Object} [options] {boolean} deep{boolean} immediate{string} flush{Function} unwatch侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、prop或 computedproperty 名作为字符串传递。对于更复杂的表达式，用一个函数取代。
const app = Vue.createApp({
data() {
return {
a: 1,
b: 2,
c: {
d: 3,
e: 4
}
}
},
created() {
// 顶层property 名
this.$watch('a', (newVal, oldVal) => {
// 做点什么
})
// 用于监视单个嵌套property 的函数
this.$watch(
() => this.c.d,
(newVal, oldVal) => {
// 做点什么
}
)
// 用于监视复杂表达式的函数
this.$watch(
// 表达式 `this.a + this.b` 每次得出一个不同的结果时
// 处理函数都会被调用。
// 这就像监听一个未被定义的计算属性
() => this.a + this.b,
(newVal, oldVal) => {
// 做点什么
}
)
}
}) 当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为它们引用相同的对象/数组：
const app = Vue.createApp({
data() {
return {
article: {
text: 'Vue is awesome!'
},
comments: ['Indeed!', 'I agree']
}
},
created() {
this.$watch('article', () => {
console.log('Article changed!')
})
this.$watch('comments', () => {
console.log('Comments changed!')
})
},
methods: {
// 这些方法不会触发侦听器，因为我们只更改了Object/Array的一个property，
// 不是对象/数组本身
changeArticleText() {
this.article.text = 'Vue 3 is awesome'
},
addComment() {
this.comments.push('New comment')
},
// 这些方法将触发侦听器，因为我们完全替换了对象/数组
changeWholeArticle() {
this.article = { text: 'Vue 3 is awesome' }
},
clearComments() {
this.comments = []
}
}
}) $watch返回一个取消侦听函数，用来停止触发回调：
const app = Vue.createApp({
data() {
return {
a: 1
}
}
})
const vm = app.mount('#app')
const unwatch = vm.$watch('a', cb)
// later, teardown the watcher
unwatch() 为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired 在选项参数中指定 immediate: true将立即以表达式的当前值触发回调：
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的当前值触发 `callback` 注意，在带有 immediate选项时，你不能在第一次回调时取消侦听给定的 property。
// 这会导致报错
const unwatch = vm.$watch(
'value',
function() {
doSomething()
unwatch()
},
{ immediate: true }
)
如果你仍然希望在回调内部调用一个取消侦听的函数，你应该先检查其函数的可用性：
let unwatch = null
unwatch = vm.$watch(
'value',
function() {
doSomething()
if (unwatch) {
unwatch()
}
},
{ immediate: true }
)
flush选项允许更好地控制回调的时间。它可以设置为pre、post或sync。
默认值为pre，它指定在呈现之前应调用回调。这允许回调在模板运行之前更新其他值。
值post可用于将回调延迟到呈现之后。如果回调需要通过$refs访问更新的DOM或子组件，则应使用此选项。
如果flush设置为sync，则只要值发生更改，就会同步调用回调。
对于pre和post，回调都使用队列进行缓冲。回调只会添加到队列一次，即使关注的值更改多次。临时值将被跳过，不会传递给回调。
缓冲回调不仅可以提高性能，而且有助于确保数据一致性。在执行数据更新的代码完成之前，不会触发监视程序。
sync观察者应该谨慎使用，因为他们没有这些好处。
有关`flush`的详细信息，请参见[效果刷新计时](https://www.w3cschool.cn/vuejs3/vuejs3-35qs3f4h.html)。
{string} eventName[...args]触发当前实例上的事件。附加参数都会传给监听器回调。
只配合一个事件名使用 $emit：
<div id="emit-example-simple">
<welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
const app = Vue.createApp({
methods: {
sayHi() {
console.log('Hi!')
}
}
})
app.component('welcome-button', {
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
</button>
`
})
app.mount('#emit-example-simple') 配合额外的参数使用 $emit：
<div id="emit-example-argument">
<advice-component v-on:give-advice="showAdvice"></advice-component>
</div>
const app = Vue.createApp({
methods: {
showAdvice(advice) {
alert(advice)
}
}
})
app.component('advice-component', {
data() {
return {
adviceText: 'Some advice'
}
},
template: `
<div>
<input type="text" v-model="adviceText">
<button v-on:click="$emit('give-advice', adviceText)">
Click me for sending advice
</button>
</div>
`
}) 迫使组件实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
{Function} [callback]将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 nextTick一样，不同的是回调的 this自动绑定到调用它的实例上。
Vue.createApp({
// ...
methods: {
// ...
example() {
// modify data
this.message = 'changed'
// DOM is not updated yet
this.$nextTick(function() {
// DOM is now updated
// `this` is bound to the current instance
this.doSomethingElse()
})
}
}
})