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. 框架之jQuery妙用

    1.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  2. swiper轮播,添加鼠标移入事件停止轮播,移出重新开启轮播

    已测过无问题.

  3. Java8 新特性 Optional 类

    Optional 类的简介   Optional类的是来自谷歌Guava的启发,然后就加入到Java8新特性中去了.Optional类主要就是为子决解价值亿万的错误,空指针异常.   Optional ...

  4. day05——字典

    day05 字典 字典-- dict: 字典无序的,可变的数据类型 用于存储大量数据,字典要比列表快,将数据和数据之间进行关联 lst1 = ['常鑫','李文虎','张宇'] # 姓名 lst2 = ...

  5. golang学习笔记 ---slice

    Go 语言中的slice类型可以理解为是数组array类型的描述符,包含了三个因素: 指向底层数组的指针 slice目前使用到的底层数组的元素个数,即长度 底层数组的最大长度,即容量 因此当我们定义一 ...

  6. nginx 配置 server

    server{ listen 80; server_name test.eoews.cn; #项目文件的路径 root "D:/developer/study/PHPTutorial/WWW ...

  7. PIE SDK缓冲区分析算法

    1.算法功能简介 缓冲区分析是指有点.线.面实体为基础,自动建立其周围一定宽度范围内的缓冲区多边形图层,然后建立该图层与目标图层的叠加,进行分析而得到的所需的结果.他是用来解决邻近度问题的控件分析工具 ...

  8. Python学习笔记之try-except

    Python使用被称为异常的特殊对象来管理程序执行期间发生的错误.每当发生让Python不知所措的错误时,它都会创建一个异常对象.如果你编写了处理该异常的代码,程序将继续运行:如果你未对异常进行处理, ...

  9. springboot的pom.xml配置

    <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...

  10. python高级编程——入门语法(二)

    闭包 概念:外函数outer定义一个变量a,又定义一个内函数inner,而这个内函数inner访问了外函数outer的变量a,如果需要改变外函数outer的变量a的值,则需要声明 nonlocal a ...