vue中偵聽器和計算屬性的使用

watch偵聽器

在vue中有一些操作總是在某一個值得改變後進行相應的操作，這就需要進行動態的追蹤該值得改變，並且進行相應的操作，這種情況下就需要使用偵聽器watch。

普通用法

如果需要追蹤的值知識簡單的基礎類型的改變，只需要使用watch的普通用法即可進行動態的監聽屬性的變化。

watch: {
    value() {
        // 在value變量改變後進行其他操作。
        this.render();
    }
}

深度偵聽

當對於對象或者數組等複雜類型的監聽時需要進行多層遍歷進而判斷是否變化，此時就需要使用watch的深度監聽。

watch: {
    value: {
        handle() {
            // 在value變量改變後進行其他操作。
        },
        deep: true // 深度偵聽
}
}

computed計算屬性

簡單運算

當模板中的表達式過於冗長的時候就需要考慮使用計算屬性進行計算操作，以減少模板中表達式的長度，計算屬性會動態的計算屬性的值,對於計算屬性計算的值需要返回一個值，不可以進行data中值得賦值操作。

computed: {
      value() {
           if (this.flag) {
                return 55;
          } else {
                return 20;
          }
        }
}

動態偵聽

由於計算屬性會動態計算相關值得操作，如上段代碼中就是在flag變化的時候會動態的計算一遍然後將新的值賦值給value，所以有時候可以使用computed對於某一變量的動態計算和賦值。