Vue侦听器
程序员文章站
2022-05-16 21:29:46
...
前言
所谓 侦听器(watch)，就是 当数据发生变化时，及时做出响应处理。
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
注意：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的！
基本使用
创建一个侦听器非常简单，只需要在 vm 对象上挂载 watch 属性，然后监听 data 中的数据即可。
<body>
<div id="app">
<input type="text" v-model="message">
<h2>状态：{{ state }}</h2>
</div>
</body>
let vm = new Vue({
el: '#app',
data: {
message: 'Hello',
state: '【未修改】'
},
watch: {//监听属性
// 绑定监听数据
message: function (e){
// 当数据修改时做出响应(处理函数)
this.state = '【已修改????】'
// ...
}
}
})
侦听 “及时” 吗？
假如在侦听器里更改监听数据的话，那么显示 更改前的数据 / 还是显示更改后的数据呢？
<body>
<div id="app">
<input type="text" v-model="message">
</div>
</body>
let vm = new Vue({
el: '#app',
data: {
message: 'Hello',
},
watch: {//监听属性
// 绑定监听数据
message: function (e){
// 首次输出
console.log(e)
// 更改监听数据(会再次触发监听器)
this.message = "new Hello"
// 打印最新值
console.log("即将显示最新值 ↓")
console.log(e)
}
}
})
答案是：及时。
这里解释一下，为什么会输出 6 句（而不是 3 句），因为当执行到 this.message = "new Hello" 时，又再一次触发了监听器，函数又重新执行了一遍。
总结
- 同样的，监听器还可以监听数组 / 对象。
- 监听器使用不宜过多，因为会造成性能下降。
- 允许异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
上一篇： 2022年节假日json
下一篇： 【每日刷题】对称二叉树