参考文档：https://v3.cn.vuejs.org/api/instance-methods.html
$watch：
API文档：
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
选项：immediate
在选项参数中指定 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
flush 选项可以更好地控制回调的时间。它可以设置为 'pre'、'post' 或 'sync'。
默认值是 'pre'，指定的回调应该在渲染前被调用。它允许回调在模板运行前更新了其他值。
'post' 值是可以用来将回调推迟到渲染之后的。如果回调需要通过 $refs 访问更新的 DOM 或子组件，那么则使用该值。
如果 flush 被设置为 'sync'，一旦值发生了变化，回调将被同步调用。
对于 'pre' 和 'post'，回调使用队列进行缓冲。回调只被添加到队列中一次，即使观察值变化了多次。值的中间变化将被跳过，不会传递给回调。
缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。
'sync' 侦听器应少用，因为它们没有这些好处。
更多关于 flush 的信息，请参阅副作用刷新时机。
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
根组件：{{msg}}
<test :msg="msg"></test>
</div>
<script>
var app = Vue.createApp({
data() {
return {
msg: '组件传值'
}
},
created() {
//监听参数msg是否发生了变化
this.$watch('msg', (newVal, oldVal) => {
console.log("值发生了变化：");
console.log("旧值：" + oldVal);
console.log("新值：" + newVal);
console.log("data：" + this.$data.msg);
})
},
mounted() {
console.log(this.$data.msg);
this.$data.msg = "222"
}
});
app.mount('#app')
</script>
</body>
</html>
运行结果：
$emit：
API文档：
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
根组件：{{msg}}
<test :msg="msg" v-on:change_="changeMsg"></test>
</div>
<script>
var app = Vue.createApp({
data() {
return {
msg: '组件传值'
}
},
created() {
//监听参数msg是否发生了变化
this.$watch('msg', (newVal, oldVal) => {
console.log("值发生了变化：");
console.log("旧值：" + oldVal);
console.log("新值：" + newVal);
console.log("data：" + this.$data.msg);
})
},
mounted() {
console.log(this.$data.msg);
this.$data.msg = "222"
},
methods: {
changeMsg(msg) {
this.$data.msg = msg
}
}
});
app.component('test', {
emits: ['change_'],
template: `
<button v-on:click="$emit('change_','3333')">
Click me to be change_
</button>
`
})
app.mount('#app')
</script>
</body>
</html>
运行结果：
$forceUpdate：
API文档：
$nextTick：
API文档：
