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. 作业帮:给定一个整数数组,找出其中两个数相加等于目标值(去重set)

    题目描述 给定一个整数数组,找出其中两个数相加等于目标值 输入 [1,3,5,7,9,11] 10 输出 1,9 3,7 代码: import java.util.HashMap; import ja ...

  2. 2018-2019-2 20162329 《网络对抗技术》Exp9: Web安全基础

    目录 Exp9: Web安全基础 一.基础知识 1.SQL注入攻击 2.XSS跨站脚本攻击 3.CSRF跨站请求伪造 二.SQL注入 1. 命令注入 2. 数字注入 3. 日志欺骗 三.XSS攻击 1 ...

  3. Thread&ThreadPool、Parallel、Async和Await用法总结

    1.线程和线程池Thread&ThreadPool //线程初始化时执行方法可以带一个object参数,为了传入自定义参数,所以执行需单独调用用于传参. Console.WriteLine(& ...

  4. 【转】python 调用super()初始化报错“TypeError: super() takes at least 1 argument”

    一.实验环境 1.Windows7x64_SP1 2.Anaconda2.5.0 + python2.7(anaconda集成,不需单独安装) 二.实验步骤 2.1 在python中有如下代码: cl ...

  5. Linux record

    1.设置ubuntu密码刚安装好的ubuntu系统,没有root密码,需要用户去手动设置的. sudo passwd root 输入2次密码即可. 2. Linux下is not in the sud ...

  6. 31,Leetcode下一个排列 - C++ 原地算法

    题目描述 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须原地修改,只允许使用额外常 ...

  7. WPF DataGrid 自定义样式 MVVM 删除 查询

    看到很多小伙伴在找Dategrid样式 就分享一个 ,有不好的地方 请指出 代码部分都加了注释  需要的可以自己修改为自己需要的样式 源码已经上传 地址:  https://github.com/YC ...

  8. CopyOnWriteArrayList 源码分析 基于jdk1.8

    CopyOnWriteArrayList  源码分析: 1:成员属性: final transient ReentrantLock lock = new ReentrantLock();  //内部是 ...

  9. [转帖]Select count(*)和Count(1)的区别和执行方式

    Select count(*)和Count(1)的区别和执行方式 https://www.cnblogs.com/VicLiu/p/11672303.html 在SQL Server中Count(*) ...

  10. javascript中的异步操作以及Promise和异步的关系

    https://segmentfault.com/a/1190000004322358 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和强大 https://se ...