vue computed計算屬性 watch監聽

 

計算屬性

computed:{
  變量:function(){
    return 計算好的值
  }
}

這時候計算好的值 就付給了你的變量 在實例中可以this.使用

注意 聲明的變量的data中不可以重復聲明否則報錯

<template>
  <div class="watch">
    <input type="text" v-model="msg" />
    <input type="text" v-model="comsg" />
  </div>
</template>

<script>
export default {
  name: "watch",
  data() {
    return {
      msg: "123"
    };
  },
  methods: {},
  computed: {
    comsg: function() {
      return this.msg
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>
效果:
初始有值的時候 就已經計算了，並且監聽數據改變重新計算

 計算屬性的getter 和setter:以上我們舉例的是默認的getter。

在你需要時，也可以提供一個setter 函數， 當手動修改計算屬性的值就像修改一個普通數據那樣時，就會觸發setter 函數，執行一些自定義的操作

getter/setter語法

 computed: {
    變量: {
      get: function() {
        return 計算的值;
      },
      set: function(newold) {
        //當計算的值被改變時調用set
        console.log(newold);


      }
    }
  }

 

 

上面的例子，除了使用計算屬性外，我們也可以通過在表達式中調用方法來達到同樣的效果，那么方法和computed都應該處於什么場景呢

computed:計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。

方法:每當觸發重新渲染時，調用方法將總會再次執行函數

假設我們有一個性能開銷比較大的的計算屬性，它需要遍歷一個巨大的數組並做大量的計算。

如果沒有緩存，我們將不可避免的多次執行 它的 getter！如果你不希望有緩存，請用方法來替代。

 

 

 watch監聽

監聽大概可以分為三種 

上面說到計算屬性的時候  初始化的時候就可以被監聽到並且計算 但是watch是發生改變的時候才會觸發:例如

這是基本用法

<template>
  <div class="watch">
    <input type="text" v-model="msg" />
    <input type="text" v-model="comsg" />
  </div>
</template>

<script>
export default {
  name: "watch",
  data() {
    return {
      msg: "123",
      comsg: ""
    };
  },
  methods: {},
  watch: {
    msg(newval, old) {
      console.log(newval, old);
      this.comsg = this.msg
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>
效果:可以發現 初始化的時候並沒有觸發 watch監聽  圖二改變的時候才觸發了watch

 

handler方法和immediate屬性

如果 父組件向子組件傳值時 這時候值並沒有發生改變我們卻想在初始的時候就觸發watch 就需要這個屬性了 immediate  默認為false  為true時只初始化可以被監聽

 

<template>
  <div class="watch">
    <input type="text" v-model="msg" />
    <input type="text" v-model="comsg" />
  </div>
</template>

<script>
export default {
  name: "watch",
  data() {
    return {
      msg: "123",
      comsg: ""
    };
  },
  methods: {},
  watch: {
    msg: {
      handler(newval, old) {
        console.log(newval, old);
        this.comsg = this.msg
          .split("")
          .reverse()
          .join("");
      },
      immediate: true
    }
  }
};
</script>
效果:
可以看到 初始的時候就觸發了watch監聽 old打印為undefined   
注意到handler了嗎，我們給 msg 綁定了一個handler方法，之前我們寫的 watch 方法其實默認寫的就是這個handler，Vue.js會去處理這個邏輯，最終編譯出來其實就是這個handler。

deep屬性

watch 里面還有一個屬性 deep，默認值是 false，代表是否深度監聽

語法:用來監聽obj 

 watch: {
    obj: {
      handler(newval, old) {
        //newval   old
      },
      immediate: true,
      deep: true
    }
  }

deep的意思就是深入觀察，監聽器會一層層的往下遍歷，給對象的所有屬性都加上這個監聽器，但是這樣性能開銷就會非常大了，任何修改obj里面任何一個屬性都會觸發這個監聽器里的 handler。

如果監聽obj中的屬性 例如obj.a 就可以優化,使用字符串形式監聽   這樣 vue會一層一層解析，直到遇見a屬性，然后給它設置監聽函數

 

watch: {
    'obj.a': {
      handler(newval, old) {
        //newval   old
      },
      immediate: true,
      // deep: true
    }
  }

注銷watch

為什么要注銷 watch？因為我們的組件是經常要被銷毀的，比如我們跳一個路由，從一個頁面跳到另外一個頁面，那么原來的頁面的 watch 其實就沒用了，這時候我們應該注銷掉原來頁面的 watch 的，不然的話可能會導致內置溢出。我們平時 watch 都是寫在組件的選項中的，會隨着組件的銷毀而銷毀。

如果這種寫法就需要手動注銷watch

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
 
unWatch(); // 手動注銷watch

watch監聽路由

watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示來自於哪個界面
      if(to.path=="/lifeCycle"){
　　　　　　console.log("生命周期");

 } } }