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. 关于Datastage资料库的一点小发现

    这里的资料库,指的是Datastage Metadata层,在Datastage7.5以后,需要在安装Datastage时安装一个数据库用于存放用户数据. 昨天领导要求安装Datastage集群/高可 ...

  2. linux yum list、search、-y、install、update、remove、grouplist、groupinstall、groupremove

    redhat使用yum需要付费yum安装的也是rpm包 centos的网络yum源默认已经配置好了,连接的是centos官方yum源,在国外,网速慢 yum源配置在/etc/yum.repos.d下 ...

  3. pycharm 调试Django 奇葩问题:Process finished with exit code -1073741819

    想自己整个BLOG,发现python+Django好像还不错,尝试一下.在使用过程中,突然pycharm不能调试django工程.网上搜索也没解决,是google哦.好像记得启动pycharm时,看到 ...

  4. zabbix系列之一——简要介绍

    参考来源:(官网) https://www.zabbix.com/documentation/3.4/manual/introduction/about 1what’s zabbix? index d ...

  5. 网站换了HTTPS后残留部分http处理方式

    网站换了HTTPS后残留部分http处理方式,以前添加的文章里面是有http的,导致浏览器打开网站的时候提示证书不安全,解决方法很简单 在html页面上加上这一段话 <!-- 强制让http的访 ...

  6. JBoss服务器优化

    JBOSS参数调优 配置deploy/jboss-web.deployer/server.xml文件 . <Connector port="8080" address=&qu ...

  7. tshark----wireshark的命令行工具

    tshark - 转储和分析网络流 概要 tshark的 [  -2  ] [  -a  <捕捉自动停止条件>] ... [  -b  <捕捉环形缓冲区选项>] ... [   ...

  8. 转:C# WinForm窗体及其控件的自适应

    一.说明 2012-11-30 曾经写过 <C# WinForm窗体及其控件自适应各种屏幕分辨率>  ,其中也讲解了控件自适应的原理.近期有网友说,装在panel里面的控件,没有效果? 这 ...

  9. nginx安装脚本

    #!/bin/bash#auto config Nginx#by zhangjia 2019#define Path variables#date:2019/1/16 check_ok() { ]] ...

  10. mac osx 升级到10.10 软件无法打开的问题

    osx升级到10.9.5 和10.10后,很多软件出现无法打开的问题, This patch seems to be corrupted.Please make sure you get your p ...