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. Solo 博客系统 1.7.0 发布 - 新版 MD 编辑器

    本次发布主要是更新了 Markdown 编辑器,加入了全屏.Emoji 自动完成.粘贴时自动转换为 MD 格式的特性.(1.7.0 版本变更记录请看这里) 目前的 Markdown 编辑器有多好用呢? ...

  2. CRM系统新思维

    客户关系管理系统(CRM系统)是管理公司当前以及未来潜在客户的系统,其主要目的是通过优化客户关系实现公司销售业绩的长期增长,它是企业信息系统的核心之一.目前,移动互联网.大数据以及人工智能技术发展日新 ...

  3. OpenGL学习—04--彩色立方体

        1.tutorial04.cpp // Include standard headers #include <stdio.h> #include <stdlib.h> ...

  4. jsonp promise封装

    npm 安装jsonp import originJSONP from 'jsonp' export default function jsonp(url, data, option){ url += ...

  5. 八、Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有 ...

  6. zTree实现权限列表简单实例

    zTree的简单实例 zTree 是一个依靠jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree官网 zTreeAP ...

  7. seo关键词

    除非你站有很高的权重. 小道消息称keywords曾被百度.谷歌.雅虎等搜索引擎剔除,将不会再影响搜索引擎的排序结果,小编认为设置一下总没坏处,还是有一些搜索引擎比较重视keywords标签的. 用法 ...

  8. 优化 ExpressRoute 路由

    当你有多个 ExpressRoute 线路时,可以通过多个路径连接到 Azure.结果就是,你所采用的路由可能不是最理想的 - 也就是说,你的流量可能会经历较长的路径才能到达 Azure,而 Azur ...

  9. C#下使用XmlDocument详解

    XML在开发中作为文件存储格式.数据交换的协议用的非常普遍,各个编程语言有都支持.W3C也制定了XML DOM的标准.在这里主要介绍下.Net中的XmlDocument,包括xml读取和写入等功能.一 ...

  10. aws rhel 7 安装GUI ,配置VNC

    预计阅读时间:15分钟 预计配置时间:30分钟  (前提是已经申请AWS的EC2的rhel7 云主机并且成功运行) 目前AWS 亚马逊云免费试用一年,申请一个学习使用 痛点:没有GUI,无法搭建Jen ...