Vue使用watch监听一个对象中的属性

Little_XM 发布于2019-08-26 18:26 / 2672人阅读

摘要：链接描述问题描述提供了一个方法可以让使用者去监听某些内的数据变动，触发相应的方法，比如第一种解决方案直接对象现在我需要监听这个，我可以这样做第二种解决方案里面的设为了，这样的话，如果修改了这个中的任何一个属性，都会执行这个方法。

链接描述

问题描述

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
         },
     }
}

GPU云服务器云服务器 js包装对象中的属性 vue实例属性 vue.js 属性 vue的计算属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110195.html

【Vue原理】Watch - 源码版

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版今天继续探索源码，废话不写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

Hancock_Xu 2019-08-23 18:32 评论0 收藏0
Vue中watch对象内属性的方法

摘要：通常写法是，上述情况里中的属性可以直接监听，但是如果需要监听的数据是对象内的某一属性值的变化，直接对象是检测不到变化的，这是因为这个对象的指向并没有发生改变。不过这样会造成更多的性能开销，尤其是对象里面属性过多，结构嵌套过深的时候。 vue提供了watch方法，用于监听实例内data数据的变化。通常写法是： new Vue({ data: { count: 10， ...

OldPanda 2019-08-23 15:05 评论0 收藏0
针对vue wtach一次详细的剖析

摘要：提问深度与非深度的区别对象与数组与的区别的一个特点是，最初绑定的时候是不会执行的，要等到改变时才执行监听计算。为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象适用场景一个数据影响多个数据。提问 1.深度watch与非深度watch的区别；2.watch对象与数组；3.watch与computed的区别； immediate FullNa...

crossoverJie 2019-08-23 18:05 评论0 收藏0
【Vue原理】Watch - 白话版

摘要：而是在初始化时，在读取了监听的数据的值之后，便立即调用一遍你设置的监听回调，然后传入刚读取的值设置了时，如何工作我们都知道有一个选项，是用来深度监听的。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下...

hzx 2019-08-23 18:25 评论0 收藏0
前端面试汇总VUE(二)

摘要：采用了新旧的对比，获取差异的，最后一次性的更新到真实上。对基本属性进行监听对对象进行监听对对象某一个属性监听监听自定义指令全局指令，第一个参数是指令名，第二个参数是一个对象，对象内部有个的函数，函数里有这个参数，表示绑定了这个指令的元素。 11.vue 虚拟DOM的理解 Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化， ...

Sanchi 2019-08-23 18:29 评论0 收藏0