Vue中watch对象内属性的方法

OldPanda 发布于2019-08-23 15:05 / 3551人阅读

摘要：通常写法是，上述情况里中的属性可以直接监听，但是如果需要监听的数据是对象内的某一属性值的变化，直接对象是检测不到变化的，这是因为这个对象的指向并没有发生改变。不过这样会造成更多的性能开销，尤其是对象里面属性过多，结构嵌套过深的时候。

vue提供了watch方法，用于监听实例内data数据的变化。通常写法是：

new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  watch: {
    count: function (newval, oldVal) {
      console.log(`new: %s, old: %s`, newVal, oldVal);
    }
  }
})

上述情况里data中的count属性可以直接监听，但是如果需要监听的数据是对象内的某一属性值的变化，直接watch对象blog是检测不到变化的，这是因为blog这个对象的指向并没有发生改变。有几个解决方法

1.深度监测

new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  watch: {
    blog:{
        handler(newVal,oldVal){
            console.log(`new: ${newVal}, old: ${oldVal}`);
        },
        deep:true
    }
  }
})

里面的deep设为了true，这样的话，如果修改了这个blog中的任何一个属性，都会执行handler这个方法。不过这样会造成更多的性能开销，尤其是对象里面属性过多，结构嵌套过深的时候。而且有时候我们就只想关心这个对象中的某个特定属性，这个时候可以这样

2.用字符串来表示对象的属性调用

new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  watch: {
    "blog.categories"(newVal, oldVal) {
        console.log(`new:${newVal}, old:${oldVal}`);
    }, 
  }
})

3.使用computed计算属性

new Vue({
  data: {
    count: 10，
    blog:{
        title:"my-blog",
        categories:[]
    }
  },
  computed: {
    categories() {
      return this.blog.categories;
    }
  },
  watch: {
    categories(newVal, oldVal) {
      console.log(`new:${newVal}, old:${oldVal}`);
    }, 
  },
})

Reference

计算属性和侦听器 — Vue.js
vue watch对象内的属性监听
Vue使用watch监听一个对象中的属性

GPU云服务器云服务器 js包装对象中的属性 js，对象中增加数据的方法对象不支持属性或方法 vue的计算属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101498.html

vue 开发中遇到的问题汇总（踩坑指南）

摘要：组件中使用定时器及销毁问题如果我们在页面中使用了一个定时器，当从页面跳转到页面时，如果不手动清除这个定时器，那么它仍旧会执行，这不是我们所期望的。公司年初开始从jquery转型到vue开发，思想上从jquery的操作DOM到vue的操作数据，刚开始还不太习惯，但用了一段时间发现确实比较方便。在刚开始用vue的时候，也踩了一些坑，现在分享出来，供刚入门上手开发vue的朋友参考，都是一些...

wean 2019-08-20 18:52 评论0 收藏0
【Vue原理】Watch - 源码版

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版今天继续探索源码，废话不写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

Hancock_Xu 2019-08-23 18:32 评论0 收藏0
【Vue原理】Watch - 白话版

摘要：而是在初始化时，在读取了监听的数据的值之后，便立即调用一遍你设置的监听回调，然后传入刚读取的值设置了时，如何工作我们都知道有一个选项，是用来深度监听的。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下...

hzx 2019-08-23 18:25 评论0 收藏0
# vue.js 之对vue.js基础理解

摘要：之对基础理解构造器是一个构造函数，编程中称之为构造器每一个都是一个构造函数的实例，这个过程叫做实例化构造函数需要将其实例化后才会启用构造器要求实例化时需要传入一个选项对象组件其实都是被扩展的实例。 vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数，编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例，这个过程叫...

Rainie 2019-08-20 19:04 评论0 收藏0
前端面试汇总VUE(二)

摘要：采用了新旧的对比，获取差异的，最后一次性的更新到真实上。对基本属性进行监听对对象进行监听对对象某一个属性监听监听自定义指令全局指令，第一个参数是指令名，第二个参数是一个对象，对象内部有个的函数，函数里有这个参数，表示绑定了这个指令的元素。 11.vue 虚拟DOM的理解 Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化， ...

Sanchi 2019-08-23 18:29 评论0 收藏0