在写项目的时候遇到了一个问题,就是需要动态监听data中一个对象的属性的变化。遇到了许多坑,在此过程中也发现了两种解决方案。

一、通过deep属性实现

  data() {
return {
parent:{
child:1
}
};
},

  

  watch:{
'parent.child':{
deep:true,
handler: function(newV, oldV) {
console.log(newV);
}
}
}

二、通过computed做中介

  computed:{
newChild(){
return this.parent.child;
}
}

  

  watch:{
newChild(newV,oldV){
alert(newV)
}
},

  


返回目录

vue data中的对象的属性如何使用watch监听的更多相关文章

  1. 统计Mongo数组中相同对象的属性之和

    统计Mongo数组中相同对象的属性之和 需求 需要统计app端用户的行为,按天分表,存入mongo.每次用户进行操作的时候,将数据存入app本地,下次用户启动的时候,提交存入mongo,删除app本地 ...

  2. [原创]java WEB学习笔记59:Struts2学习之路---OGNL,值栈,读取对象栈中的对象的属性,读取 Context Map 里的对象的属性,调用字段和方法,数组,list,map

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  4. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  5. JAVA中JavaBean对象之间属性拷贝的方法

    JAVA中JavaBean对象之间的拷贝通常是用get/set方法,但如果你有两个属性相同的JavaBean或有大部分属性相同的JavaBean,对于这种情况,可以采用以下几个简便方法处理. 下面对这 ...

  6. 全面理解Javascript中Function对象的属性和方法

    http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...

  7. List集合中的对象根据属性排序

    集合类List存放的数据,默认是按照放入时的顺序存放的,比如依次放入A.B.C,则取得时候,则也是A.B.C的顺序,实际场景中,有时我们需要根据自定义的规则对List中的元素进行排序,该如何实现呢?看 ...

  8. JS中访问对象的属性

    方式一: 对象名.属性名;   方式二: 对象名["属性名"];   ★注意:方式二中,属性名以字符串的形式出现在方括号中,这意味着通过方式二访问属性的话,可以实现“动态访问对象的 ...

  9. 你好,C++(38)从问题描述中发现对象的属性和行为 6.4 工资程序成长记:类与对象(上)

    6.4  工资程序成长记:类与对象 “夜半三更哟,盼天明:寒冬腊月哟,盼春风.若要盼得哟,涨工资,岭上……”自从上次老板许诺给小陈涨工资以后,一转眼又过去几个月了,可是涨工资的事一点动静都没有.小陈只 ...

随机推荐

  1. 巧用 Img / JavaScript 采集页面数据

    摘要: 当我们有一个新内容时(例如新功能.新活动.新游戏.新文章),作为运营人员总是迫不及待地希望能尽快传达到用户,因为这是获取用户的第一步.也是最重要的一步. 点此查看原文:http://click ...

  2. TypeError: Cannot read property '$$' of undefined at HTMLElement._attached.wx.getPlatform._touchstartHandlerForDevtools

    TypeError: Cannot read property '$$' of undefined     at HTMLElement._attached.wx.getPlatform._touch ...

  3. 关于STM32的I2C硬件DMA实现

    关于STM32的I2C硬件DMA实现 网上看到很多说STM32的I2C很难用,但我觉得还是理解上的问题,STM32的I2C确实很复杂,但只要基础牢靠,并没有想象中的那么困难. 那么就先从基础说起,只说 ...

  4. JDBC (Java DataBase Connectivity)数据库连接池原理解析与实现

    一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...

  5. linux系统编程--信号

    信号的概念 man 7 siganl  查看man手册 信号在我们的生活中随处可见, 如:古代战争中摔杯为号:现代战争中的信号弹:体育比赛中使用的信号枪......他们都有共性:1. 简单 2. 不能 ...

  6. sudo/su

    linux用户分为根用户/ 普通用户 系统用户 根用户和普通用户是可以实际登录到系统中的,普通用户是没办法使用useradd添加新用户的,只有根用户有权限 当然,也可以使用su su 是切换用户的意思 ...

  7. HGOI20191114 CSP模拟赛 反思

    Problem A 宇宙魔方 有一个$N \times N \times N$的魔方,每一次操作可以整体转动该魔方,也可以对于一层整体+X. 给出最后魔方的最终状态,其中有一个位置为-1.利用其它位置 ...

  8. C# 父类代码动态转换子类

    百度上搜索C# 如何父类运行时转换成子类,没有得到相应答案,突然想起C# 有dynamic类型试试看结果成功了... 以后编写代码类似这样的代码 就可以删减掉了 if (en.type == EMap ...

  9. 集合家族——ArrayList

    一.概述: ArrayList 是实现 List 接口的动态数组,所谓动态就是它的大小是可变的.实现了所有可选列表操作,并允许包括 null 在内的所有元素.除了实现 List 接口外,此类还提供一些 ...

  10. 解决 go get golang.org/x/* 拉取失败问题

    go get -u -v golang.org/x/text 有时候会因为网络问题,导致失败. 在不用代理的情况下,可以使用以下方案. golang.org,他们在github上有一个镜像库 以 go ...