vue watch关于对象内的属性监听
vue可以通过watch监听data内数据的变化。通常写法是:
data: {
  a: 100
},
watch: {
  a(newval, oldVal) {
    // 做点什么。。。
    console.log(newval, oldVal)
  }
}
vue监听整个对象,如下:
- deep: true 深度监测
data: {
  return {
    msg: {
      name: 'hahah',
      color: 'red'
    }
  }
}
watch: {
  msg: {
    handler(newValue, oldValue) {
      // 做点什么。。。
      console.log(newValue)
  },
  deep: true
}
如果监听对象内的某一具体属性,可以通过computed做中间层来实现:
computed: {
  name() {
    return this.msg.name
  }
},
watch:{
  name(newValue, oldValue) {
     // 做点什么。。。
     console.log(newValue, oldValue)
  }
}
vue watch关于对象内的属性监听的更多相关文章
- vue对象属性监听
		对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ... 
- Vue基本使用---对象提供的属性功能
		一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数, 可以使用在两个地方:输出内容和操作数据中. 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue. ... 
- Vue 变量,成员,属性监听
		Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ... 
- Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)
		vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ... 
- vue2.x版本中Object.defineProperty对象属性监听和关联
		前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ... 
- Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别
		一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ... 
- 微信小程序实现watch属性监听数据变化
		Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ... 
- 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信
		avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么 ... 
- 深入理解 Getter和Setter 对对象的属性监听
		阅读目录 一:理解普通对象在声明时添加 get.set 二:Object.prototype.__defineGetter__ 和 Object.prototype.__defineSetter__ ... 
随机推荐
- node (1)
			一.介绍 Node.js是一个让JavaScript运行在服务器端的开发平台,它让JavaScript的触角伸到了服务器端. 但Node似乎有点不同: ● Node.js不是一种独立的语言,与PHP. ... 
- hornor8改user模式为debug模式
			在学习Android软件安全的过程中,经常要用到Android的动态调试.但是呢,一般的Android应用在发布的时候都是发布版的不能直接被调试,为了能使Android应用能够支持调试就需要对Andr ... 
- Linux学习之CentOS(四)----Linux各目录的介绍
			[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ... 
- [VS2015] [asp.net] 允许远程访问本机正在DEBUG的服务
			一.打开并编辑解决方案目录(不是工程目录)下的文件: \.vs\config\applicationhost.config 增加黑体行: <site name="XXXX" ... 
- RESTful 架构基础
			源自:https://mp.weixin.qq.com/s/wEr2jAVphzB1G_MISlLU0w REST(Representational State Transfer)架构风格是一种世界观 ... 
- 搭建企业级NFS网络文件共享服务说明[一]
			1.1.0. 概述: 共享/NFS目录给整个192.168.25.0/24网段主机读写 man nfs 可以查看mount的信息 rpc端口111 nfs主端口2049 1.1.1. 搭建NFS环境 ... 
- Cloudstack
			1.cloudstack介绍 一个开源具有高可用性及扩展性的云计算平台,Cloudstack是一个开源的云操作系统: cloudstack支持管理大部分主流的hypervisors,如:VMware, ... 
- Hadoop HBase概念学习系列之HFile(二十)
			HFile文件是不定长的. HFile里才是想要的真正数据,实际存储的位置,是在HDFS上. 
- Hadoop HBase概念学习系列之列、列簇(十二)
			列在列簇中依照字典排序.例如,列簇是基础信息或公司域名或水果类.列是基础信息:面貌.基础信息:年龄.公司域名:org.公司域名:edu.水果类:苹果.水果类:香蕉. 列 = 列簇:列修饰符 ... 
- Altium制作DC002的PCB封装和3D模型
			Altium制作DC002的PCB封装和3D模型 常用的电源连接器(Dc Power Jack Connector)DC002.DC005等等型号的3D模型在网上很难找到合适的,我们可以选择CUI 公 ... 
