vue data中的对象的属性如何使用watch监听

  在写项目的时候遇到了一个问题,就是需要动态监听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)
    }
  },

  


返回目录

原文地址:https://www.cnblogs.com/gitByLegend/p/11125723.html

时间: 2024-10-09 01:05:41

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

swfupload js中 file 对象的属性

name=3cc68cfc60b87e6dd6887d8a.jpg modificationdate=Wed   Apr 21 15:48:30 UTC+0800 2010 filestatus=-1 post=[object   Object] type=.jpg index=0 size=29006 creationdate=Wed Apr 21 15:48:38 UTC+0800   2010 id=SWFUpload_0_0swfupload js中 file 对象的属性,布布扣,bub

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

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

Cloud Foundry中DEA与warden通信完成应用端口监听

在Cloud Foundry v2版本中,DEA为一个用户应用运行的控制模块,而应用的真正运行都是依附于warden.更具体的来说,是DEA接收到Cloud Controller的请求:DEA发送请求给warden server:warden server创建warden container并将用户应用droplet等环境配置好:DEA发送应用启动请求至warden serve:最后warden container执行启动脚本启动应用. 本文主要具体描述,DEA如何与warden交互,以保证最终

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

函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这些属性和方法,这对于理解Javascript的继承机制具有一定的帮助. 属性(Properties) arguments 获取当前正在执行的 Function 对象的所有参数,是一个类似数组但不是数组的对象,说它类似数组是因为其具有数组一样的访问性质及方式,可以由arguments[n]来访问对应的单个参数的值,并拥有数组长度属性length.还有就是arguments对象存储的是实际传递给

JavaScript中操作对象的属性

1.操作对象的属性 注意: 标签属性与DOM对象属性的对应关系: 绝大部分2者是相同的,如:imgobj.src属性对应<img src="" >中src属性,但也有例外,如<div class="main" >中,操作class属性用divobj.className. CSS属性与DOM对象属性的对应关系: 1. 两者通过obj.style.css属性名 相对应   如:obj.style.width. 2.如果CSS属性带有横线,如bor

游戏中精灵对象的属性功能设计

我们大部分it人事可能都玩过游戏,且不止一款游戏,都知道游戏有属性: 在游戏中,包含哪些属性,时候数值策划而定: 属性牵涉三个大问题, 1,属性不管是前期还是后期变更可能会非常大: 2,存在不同的属性系统,比如人物基础属性,坐骑属性,宠物属性等: 3,属性计算:属性最终计算: 第一条和第二条,是非常息息相关的功能块设计:需要做到统一,方便,且可扩展性设计: 有且是对策划在配置各种属性,各种系统中去配置属性,既要他们方便配置,思路清晰,又要方便程序扩展,转化: 1 package com.game

ios中键值编码kvc和键值监听kvo的特性及详解

总结: kvc键值编码  1.就是在oc中可以对属性进行动态读写(以往都是自己赋值属性)           2. 如果方法属性的关键字和需要数据中的关键字相同的话                  3. 动态设置:setValue:属性值 forKey:属性名(用于简单的路径)/setValue:属性值 forKeyPath:属性名(用于复杂的路径)kvo键值监听  永久性的监听item属性值的改变,如果改变就从新设置             1.监听方法:[addObserver:self

vue 组件 子向父亲通信用自定义方法用事件监听

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Title of page</title> </head> <body> <div id="example"> <input v-model="parentsg"> <br> <child v-

js中如何在不影响既有事件监听的前提下新增监听器

一. 需求澄清 比如某个按钮已经绑定了2-3个对Window对象的load事件的监听,现在需要添加一个新的对click事件的监听器,但在一定条件下才会同时触发原有的2-3个load监听器,否则只触发新添加的这个事件. 假定新添加的监听函数为: function additionalListener(){ console.log('should do something else'); } 二. ES5方法 ES5中可以通过添加包装函数的方式来实现: _windowonload = window.