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. find命令常用参数

    目录 -name -type -size -empty -inum -links -perm -user -group -atime -ctime -mtime -amin -cmin -mmin - ...

  2. 出师表(ENGLISH) 强烈打call啊~王洛勇是什么神仙英语

    臣亮言:先帝创业未半而中道崩殂, Permit me to observe: the late emperor was taken from us before he could finish his ...

  3. 【MySQL】Mariadb安装

    Mariadb安装 1.解压 [root@oradb bin]# tar zxvf mariadb-10.3.18-linux-x86_64.tar.gz [root@oradb bin]# mv m ...

  4. Unsafe例子

    Java和C++语言的一个重要区别就是Java中我们无法直接操作一块内存区域,不能像C++中那样可以自己申请内存和释放内存.Java中的Unsafe类为我们提供了类似C++手动管理内存的能力,不建议使 ...

  5. ElasticSearch6.3.2源码分析之节点连接实现

    ElasticSearch6.3.2源码分析之节点连接实现 这篇文章主要分析ES节点之间如何维持连接的.在开始之前,先扯一下ES源码阅读的一些心得:在使用ES过程中碰到某个问题,想要深入了解一下,可源 ...

  6. Mysql 错误 ERROR 1 (HY000) at line 1: Can't create/write to file '/home/kaizenly/cfg_dict.csv' (Errcode: 13 - Permission denied)

    [1]问题描述 (1)执行SQL语句: use billing; select * from cfg_dict into outfile '/home/kaizenly/cfg_dict.csv' f ...

  7. @Bean修饰的方法参数的注入方式

    @Bean修饰的方法参数的注入方式: 方法参数默认注入方式为Autowired,即先根据类型匹配,若有多个在根据名称进行匹配. 1:复杂类型可以通过@Qualifier(value=“XXX”)限定; ...

  8. git add无效,git status(modified content, untracked content)

    问题一:git status 时文件目录后提示(modified content, untracked content) git add后也添加不上,文件不能提交上去   例如下图:   原因: 该文 ...

  9. 浅析libuv源码-node事件轮询解析(2)

    上一篇讲了轮询的边角料,这篇进入正题.(竟然真有人看我博客,上两个图给你们整理下思路) 这是轮询总流程图. 下图为本节内容简图. Poll for I/O The loop blocks for I/ ...

  10. C#工具类OracleHelper,基于Oracle.ManagedDataAccess.Client封装

    基于Oracle.ManagedDataAccess.Client封装的Oracle工具类OracleHelper,代码如下: using System; using System.Data; usi ...