vue watch监听方法总结
更新时间：2022年05月08日 17:26:53 作者：前端小彭
这篇文章主要给大家分享的是vue watch监听方法总结，侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值。下面我们就一起进入文章了解更具体的内容吧
在vue中，使用watch来响应数据的变化，关于watch的用法大致有三种。
1.vue中的watch作用就如其命名就是监听的作用
比如有个对象：
watchData: {
name: '',
age: '',
}
2.监听这个对象的属性
watchData: {
handler: function() {
console.log();
},
deep: true
}
监听对象可以用deep，深度监测，不然监测不到对象的变化
3.监听这个对象的属性
方式一：
watch: {
'watchData.name'(newValue, oldValue) {
console.log(newValue);
}
}
方式二：
watch: {
'watchData.name': {
handler: function() {
console.log();
}
}
},
为什么要监听对象的属性，监听对象的话，一旦对象内部的任何数据变化，都会导致watch重新执行，这样的话可能不是你想要的监听某一个属性变化才执行watch，或者是一旦说对象内部任何一个属性变化就让其watch执行，也会对性能有一定性的损耗，所以我们用这种监听对象单个属性的方式来处理，给要监听的“对象.属性，用引号包裹起来”
4.监听这个对象的属性
computed: {
getName() {
return this.watchData.name
}
},
watch: {
getName(newValue, oldValue) {
console.log(newValue);
}
},
这种方式其实和第二种是一样的，区别就是用到了computed，然后再监听方法getName，实际上方法getName返回的就是watchData对象中的name属性
到此这篇关于vue watch监听方法总结的文章就介绍到这了,更多相关vue watch监听方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中的.vue文件的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了手写Vue弹窗Modal的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了vue-cli脚手架-bulid下的配置文件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
在Vue中我们可以使用ref属性来获取子组件的实例对象,这个功能非常方便,这篇文章主要给大家介绍了关于Vue获取子组件实例对象ref属性的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了在使用vue-cli创建vue项目,如何添加和删除预置配置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了解决iview多表头动态更改列元素发生的错误的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vue-resource 获取本地json数据404问题的解决
这篇文章主要介绍了vue-resource 获取本地json数据404问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue3.0组合式api的使用小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
SVG指可伸缩矢量图形,用来定义用于网络的基于矢量的图形,下面这篇文章主要给大家介绍了关于如何在vue3+vite项目中使用svg的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了关于vue双向绑定带来的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论