vue中的watch方法常用

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}`);
  },
 },
})