(图片来源于网络,如侵删)
前言
侦听器主要是用来监听数据的变化,通常是在数据变化时执行
Vue官方说明
watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象
使用watch的简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>watch示例</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>今天心情so {{ isHappy?'happy':'sad' }}</h2>
<button @click="change">切换天气</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
data:{
isHappy:true,
},
methods: {
change(){
this.isHappy = !this.isHappy
}
},
watch:{
isHappy(newValue,oldValue){ //这里使用的是简写形式,当只有handler时才可以用简写形式
console.log('isHappy的值变化了',newValue,oldValue)
}
//完整写法
// isHappy:{
// handler(newValue,oldValue){
// console.log('isHappy的值变化了',newValue,oldValue)
// }
// }
}
}).$mount('#root')
</script>
</html>
本示例已经实例化了vm,也可用如下方法调用watch属性(此时不需要在实例内部再定义watch):
vm.$watch('isHappy',{
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
watch的immediate属性
使用watch监视数据变化时，当值第一次绑定(页面加载时)不会执行监听函数，只有值发生改变才会执行。若要在第一次绑定(页面加载时)也执行函数，需要添加以下属性
immediate: true
watch的deep属性
Vue中的watch默认不监视对象内部值的改变,即只监视第一层数据,如果需要监视第二层或以上层数据,需要添加以下属性:
deep: true
注:Vue自身是可以监测对象内部值的改变，但Vue提供的watch默认不可以！
补充两个小原则
(1)所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或组件实例对象.
(2)所有不被Vue所管理的函数(例如:定时器的回调函数、ajax的回调函数、Promise的回调函数等),最好写成箭头函数,这样this的指向才是vm 或组件实例对象.
最后
希望整理的信息对您有所帮助,喜欢的话请帮忙点赞
如果有什么建议,欢迎在评论区留言
不足之处还请批评指教,谢谢!
