侦听器 Watch
原文链接:https://note.noxussj.top/?source=sifo
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动。侦听器 Watch 是一个对象,键是需要观察的表达式,值是对应回调函数。有一点需要注意,当你有一些数据需要随着其它数据变动而变动时,你很容易就会滥用 Watch,如有类似这种情况使用 Computed 才是更合适。当需要在数据变化时执行异步或开销较大的操作时,使用 Watch 更合适。Watch 侦听器使用的越多,性能就会越差,所以尽量不要滥用。
基础案例
<template>
<div class="home">
<div>{{ _price }}</div>
</div>
</template>
<script>
export default {
data() {
return {
price: 100.85
}
},
watch: {
price: function () {
console.log('我被修改了')
}
},
mounted() {
setTimeout(() => {
this.price = 102.85
}, 1000)
}
}
</script>
页面渲染 dom 完毕 1 秒 后进行修改了 this.price,触发了侦听器 price 函数,所以在控制台打印了信息。
与计算属性 Computed 区别?
侦听器 Watch 和 计算属性 Computed 是完全独立的功能,虽然有点接近,但是两者没有任何关联的。
以现实生活举例,侦听器 Watch 就像监听我的手机号码,如果我的手机号码变化了,那么就要执行一个函数,这个函数里面执行了告诉我的家人,同事,朋友语句。而计算属性 Computed 是在原来某样东西的基础上进行加工,就像一杯白开水,我觉得不好喝,不满足我的需求,我就要加工,在它的基础上我加入了炼奶,最后成了一杯牛奶。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。