一，watch选项
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
如我们单击按钮+1，侦听num的数值发生变化我们就log一下
<div id="app">
{{num}}
<button @click="fn">单击+1</button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
//数据
data(){
return{
num:0
}
},
methods:{
fn(){
this.num++
}
},
watch: {
num(){
console.log("数据发生变化");
}
}
}).mount("#app")
例
- watch如果在数据变化的同时我们需要一些异步操作使用watch
二，delimiters选项
用于修改{{}}双大括号差值写法,下面例子就是修改为${}
delimiters: ['${', '}']
Watch的案例 ,比如输入框,用户在输入框输入关键词后端对应显示数据就可以使用监听来完成.
image.png
有两个额外的参数
1.immediate 立即执行
2.deep 深度监听
image.png
如何同时侦听多个数据的变化
image.png
deep修改对象嵌套属性不会发生变化,所以需要添加参数deep才可以
image.png
不想深度侦听所有属性,只想侦听某一属性避免性能浪费.
image.png
