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关于对象内的属性监听的更多相关文章

  1. vue对象属性监听

    对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...

  2. Vue基本使用---对象提供的属性功能

    一 过滤器 过滤器就是vue允许开发者自定义的文本格式化函数, 可以使用在两个地方:输出内容和操作数据中. 1.1 定义过滤器的两种方式 1.1.1 使用Vue.filter()进行全局定义 Vue. ...

  3. Vue 变量,成员,属性监听

    Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  4. Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  5. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  6. Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  7. 微信小程序实现watch属性监听数据变化

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...

  8. 迷你MVVM框架 avalonjs 学习教程15、属性监听与模块通信

    avalon的ViewModel对象从其内部EventManager里继承了三个方法,$watch.$unwatch.$fire三个方法,它们就是我们本节的主题. 词如其名,非常直白,一看就知道做什么 ...

  9. 深入理解 Getter和Setter 对对象的属性监听

    阅读目录 一:理解普通对象在声明时添加 get.set 二:Object.prototype.__defineGetter__ 和 Object.prototype.__defineSetter__ ...

随机推荐

  1. cnpm 淘宝镜像设置

    很简单,一句话 npm install -g cnpm --registry=https://registry.npm.taobao.org

  2. jsoncpp cmake

    (1)下载jsoncpp源码源码地址:https://github.com/open-source-parsers/jsoncpp/tree/0.y.z(2)解压源码 unzip jsoncpp-0. ...

  3. git下配置github sshkey

    教程看这里 http://xiaxveliang.blog.163.com/blog/static/29708034201341244759225/

  4. CSS 小结笔记之背景

    背景相关属性主要有: background-color  背景颜色 background-image 背景图片 background-repeat 是否平铺 repeat (默认平铺) | repea ...

  5. 3D打印材料的发展现状(1)

    材料是3D打印的物质基础,也是当前制约3D打印发展的瓶颈. 3D打印材料 3D打印材料是3D打印技术发展的重要物质基础,材料的发展对于3D打印的发展有重要的作用. 目前,3D打印材料主要包括工程塑料. ...

  6. Jmeter入门--参数化、集合点

    一.参数化 1.用户定义的变量 用户自定义变量中的定义的所有参数的值在测试计划的执行过程中不能发生取值的改变,因此一般仅将测试计划中不需要随迭代发生改变的参数(只取一次值的参数)设置在此处.例如应用的 ...

  7. Invalid argument during startup: unknown conf file parameter : requirepass

    redis 设置来密码,出现来这个错误, 把配置文件那一行的 空格 去掉 # requirepass foobared 改成 requirepass 123456 因为# 和 requirepass ...

  8. django中的字段类型

    from http://www.cnblogs.com/lhj588/archive/2012/05/24/2516040.html Django 通过 models 实现数据库的创建.修改.删除等操 ...

  9. Linux ulimit命令详解

    ulimit 是一个计算机命令,用于shell启动进程所占用的资源,可用于修改系统资源限制 命令常用参数 -H 设置硬资源限制. -S 设置软资源限制. -a 显示当前所有的资源限制. -c size ...

  10. Error 'LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or cor

    转自:http://blog.csdn.net/junjiehe/article/details/16888197 采用红字方法可行,后来采用cmake生成sln文件时,又出现了该问题,采用了玫红色字 ...