Vue使用watch监听一个对象中的属性的实现方法
更新时间：2019年05月10日 10:51:15 作者：葛小友
这篇文章主要介绍了Vue使用watch监听一个对象中的属性的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
问题描述
Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动，触发相应的方法，比如
queryData: {
name: '',
creator: '',
selectedStatus: '',
time: [],
},
第一种解决方案：直接对象
现在我需要监听这个queryData，我可以这样做：
watch: {
queryData: {
handler: function() {
//do something
},
deep: true
}
}
第二种解决方案：deep
里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如name，这个时候可以这样
watch: {
'queryData.name': {
handler: function() {
//do something
},
}
}
第三种解决方案：（computed+watch）
或者还可以这样巧用计算属性
computed: {
getName: function() {
return this.queryData.name
}
}
watch: {
getName: {
handler: function() {
//do something
},
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
要在 Vue 项目中使用 svg-sprite-loader 来管理 SVG 图标,需要执行相应的步骤,接下来通过本文给大家介绍VUE3 加载自定义SVG文件的详细步骤,感兴趣的朋友一起看看吧2024-01-01
vue路由第二次进入页面created和mounted不执行问题及解决
这篇文章主要介绍了vue路由第二次进入页面created和mounted不执行问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了JS框架之vue.js component组件的相关资料,本文通过实例详解的方式给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
图表在我们的项目中可以帮我们很明确的看到我们想要看到的数据，本文将主要介绍Echart图表在项目中前后端使用的详细教程，感兴趣的同学可以学习一下2021-11-11
网上大部分关于Nuxt打包部署教程可谓是可以用五花八门来形容,这对于第一次接触的朋友简直是无从下手,这篇文章主要给大家介绍了关于Nuxt3+ElementPlus构建打包部署的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了编写Vue项目,如何给数组的第一位添加对象数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue路由守卫和keep-alive，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
main.js是项目的入口文件，项目中所有的页面都会加载main.js，本文主要介绍了vue项目main.js配置及使用方法，非常具有实用价值，需要的朋友可以参考下2023-05-05
作为使用Vue的开发者，我们对Vue指令一定不陌生，诸如v-model、v-on、等，同时Vue也为开发者提供了自定义指令的api，熟练的使用自定义指令可以极大的提高了我们编写代码的效率，让我们可以节省时间开心的摸鱼2023-04-04
provide和inject主要为高阶插件/组件库提供用例,这篇文章主要给大家介绍了关于Vue3中Provide / Inject的实现原理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
最新评论