Vue中watch對(duì)象內(nèi)屬性的方法

OldPanda 發(fā)布于2019-08-23 15:05 / 3579人閱讀

摘要：通常寫法是，上述情況里中的屬性可以直接監(jiān)聽，但是如果需要監(jiān)聽的數(shù)據(jù)是對(duì)象內(nèi)的某一屬性值的變化，直接對(duì)象是檢測(cè)不到變化的，這是因?yàn)檫@個(gè)對(duì)象的指向并沒有發(fā)生改變。不過這樣會(huì)造成更多的性能開銷，尤其是對(duì)象里面屬性過多，結(jié)構(gòu)嵌套過深的時(shí)候。

vue提供了watch方法，用于監(jiān)聽實(shí)例內(nèi)data數(shù)據(jù)的變化。通常寫法是：

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屬性可以直接監(jiān)聽，但是如果需要監(jiān)聽的數(shù)據(jù)是對(duì)象內(nèi)的某一屬性值的變化，直接watch對(duì)象blog是檢測(cè)不到變化的，這是因?yàn)?b>blog這個(gè)對(duì)象的指向并沒有發(fā)生改變。有幾個(gè)解決方法

1.深度監(jiān)測(cè)

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

里面的deep設(shè)為了true，這樣的話，如果修改了這個(gè)blog中的任何一個(gè)屬性，都會(huì)執(zhí)行handler這個(gè)方法。不過這樣會(huì)造成更多的性能開銷，尤其是對(duì)象里面屬性過多，結(jié)構(gòu)嵌套過深的時(shí)候。而且有時(shí)候我們就只想關(guān)心這個(gè)對(duì)象中的某個(gè)特定屬性，這個(gè)時(shí)候可以這樣

2.用字符串來表示對(duì)象的屬性調(diào)用

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

3.使用computed計(jì)算屬性

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

計(jì)算屬性和偵聽器 — Vue.js
vue watch對(duì)象內(nèi)的屬性監(jiān)聽
Vue使用watch監(jiān)聽一個(gè)對(duì)象中的屬性