watch 是vue 里非常有用的回调函数,监听数据变化,非常方便好用,但是,当监听的数据是个复杂型的数据里,里面的数据变化时普通的监听方式是监听不到的,必须使用深度监听:

data() {
return {
name: 'abc',
list: [
{name: 'a', age: 1},
{name: 'b', aget: 2}
]
}
},
watch: {
name(n, o) {
// 监听name 的变化 n 为新数据,o 为旧数据
},
'list.0.name': {
handler: function (n, o) {
// 监听数组list 的第一项的name值变化;n 为新数据,o 为旧数据
},
deep: true
  }
}

vue watch 深度监听的更多相关文章

  1. vue watch 深度监听以及立即监听

    vue watch对象可以监听数据,数据发生变化,处理函数 watch虽可以监听,但只是浅监听,只监听数据第一层或者第二层.比如对于整个对象的监听,需要用到深度监听 vm.$watch('obj',f ...

  2. vue watch深度监听对象,实现数据联动

    当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值 <template> <input type="text" v-model="a.a1.a1 ...

  3. vue 侦听器watch 之 深度监听 deep

    <template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: &l ...

  4. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  5. Vue.js中 watch(深度监听)的最易懂的解释

    <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...

  6. Vue.js中 watch的理解以及深度监听

    如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...

  7. 每天一点点之vue框架 watch监听变量(深度监听)

    <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...

  8. vue中如何深度监听一个对象?

    大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.那 ...

  9. Vue.js中 watch(深度监听)的最易懂的解释[转]

    https://blog.csdn.net/qq_36688143/article/details/81287535 taskData: { handler(v) { // watch 方法其实默认写 ...

随机推荐

  1. Windows下MySQL安装流程,8.0以上版本ROOT密码报错及修改

    官网下载MySQL安装后,解压,添加环境变量,以管理员方式运行cmd,运行以下命令 mysqld --initialize --console mysqld -install net start my ...

  2. [原创]App崩溃率统计工具推荐

    [原创]App崩溃率统计工具推荐 1 友盟(推荐) 友盟是一款比较成熟的工具,同时也可以展示留存,日活,事件等. 2 Bugly   腾讯的bugly统计数据也算是比较早的,可惜后续维护比较弱,功能与 ...

  3. Jenkins使用过程中遇到的问题

    1./usr/local/jdk1.8.0_191/ is not a directory on the Jenkins master (but perhaps it exists on some a ...

  4. centos上安装grafana

    wget https://dl.grafana.com/oss/release/grafana-6.2.5-1.x86_64.rpm yum localinstall grafana-6.2.5-1. ...

  5. Java中调用存储过程

    dao层: import java.util.Map; public interface AppGthdDao { public String gthd(Map map); } mapper层 < ...

  6. POJ 1146 ID Codes 用字典序思想生成下一个排列组合

    ID Codes Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7644   Accepted: 4509 Descript ...

  7. js、jscore与webkit、nodejs的关系

    js:编程语言 jscore:js语言的解释执行引擎,代表cpu: webkit.nodejs:js语言的运行平台,代表操作系统.计算机资源.

  8. mysql时间戳转日期

    -- 日期字符串转时间戳,10位,数据库存储的是13位 select UNIX_TIMESTAMP('2019-09-01 00:00:00'); -- 时间戳转日期 ,'%Y-%m-%d %H:%i ...

  9. Spring aop的一些小知识点总结

    1 Spring的aop无法拦截静态方法 2 在 proxyTargetClass = false时 对于实现了接口的bean,则只有接口中的方法会被拦截: 对于没有实现任何接口的bean,publi ...

  10. windows配置flutter的注意点

    参考官网配置:https://flutter.cn/docs/get-started/install/windows 注意点: 1. 配置好环境变量后,必须重启电脑才有效果(后面还有需要重启的,所以到 ...