概述
vue中的监听方法
watch
注意
名字 你想监听哪个属性，就要和他起一样的名字
1.作用
用来监听vue实例中的数据变化
可以随时修改状态的变化
2.触发条件
当你监听的属性发生变化时，会自动调用对应的监听方法
3.使用场景
用于异步处理，开销比较大的运算
4.示例
watch:{
name(newvalue,oldvalue){
//计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值
// this.age
// console.log('name属性发生变化了')
console.log(newvalue,oldvalue)
}
5.监听对象时
<script>
export default {
data() {
return {
obj: {
name: "张三",
age: 20,
children: [
{
name: "李四",
age: 27
},
{
name: "王五",
age: 23
}
]
}
};
},
watch: {
obj: {
handler: function(newVal, oldVal) {
console.log("newVal:", newVal);
console.log("oldVal:", oldVal);
},
deep: true,
immediate: true
},
"obj.name": function(newVal, oldVal) {
console.log("newVal obj.name:", newVal);
console.log("oldVal obj.name:", oldVal);
}
},
};
</script>
监听对象的时候，需要加deep:true，这样才能深入底层去实时监听，如果没有加的话，对象是监听不到变化的。
immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听
deep:true；
是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。
到此这篇关于Vue之监听方法案例详解的文章就介绍到这了,更多相关Vue之监听方法内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！
最后
以上就是聪慧悟空为你收集整理的Vue之监听方法案例详解的全部内容，希望文章能够帮你解决Vue之监听方法案例详解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复