VUE 整理一下关于watch监听对象
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于N
·
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
1.比较数据差异,结合计算属性使用深拷贝,
2. 详解watch中的immediate、handler和deep属性
1.比较数据差异,结合计算属性使用深拷贝,
data:{
testData:{
dataInfo:{
a: '我是a',
b: '我是b'
}
}
},
watch: {
testData: {
handler: (val, olVal) => {
console.log('我变化了', val, olVal)
}
}
},
computed: {
testDateNew() {
return JSON.parse(JSON.stringify(this.testData))
}
}
如果testData发生了变化,就会打印出val,olVal,但是他们打印出来的结果都是一样的,因为数据同源。虽然可以监听到他的变化,但是要比较数据差异就不行了。如果想要得到不同的值可以结合计算属性。
2. 详解watch中的immediate、handler和deep属性
侦听器watch的其他方式
代码如下(示例):
1、immediate和handler
如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
2、deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。
watch: {
testData: {
handler: (val, olVal) => {
console.log('我变化了', val, olVal)
},
deep: true,
immediate: true
}
},
2. 侦听器watch的其他方式
Vue3文档中没有提到的,但是Vue2文档中有提到的是侦听对象的属性:'info.name': function(newValue, oldValue) { console.log(newValue, oldValue); }
总结
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。
更多推荐
已为社区贡献1条内容
所有评论(0)