vue-$watch屬性方法

特性

https://www.cnblogs.com/widgetbox/p/8954162.html
https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

1、computed特性

• 一個數據受多個數據影響

1. 是計算值

2. 應用：就是簡化tempalte里面{{}}計算和處理props或$emit的傳值

3. 具有緩存性，頁面重新渲染值不變化,計算屬性會立即返回之前的計算結果，而不必再次執行函數 //性能高

• 問題 (賦值)

$set(arr,1,true) 

2、watch特性

• 一個數據影響多個 (大型開銷)

1. 是觀察的動作
2. 應用：監聽props，$emit或本組件的值執行異步操作
3. 無緩存性，頁面重新渲染時值不變化也會執行

3、差異

1. watch可以監聽對象屬性
2. computed值set賦值時不能改變本身，只能通過改變其他的來改變本身
3. computed發生渲染時讀取緩存，methods渲染時重新調用，watch直接監測一個值的變化情況，不會像computed檢測其中的依賴

實例

watch: {
    first.second(){}, //單個屬性 || watch如果想要監聽對象的單個屬性的變化,必須用computed作為中間件轉化,因為computed可以取到對應的屬性值
    imgSrc: {
        handler: function(newVal, oldVal) {
        },
        deep: true,  //深度監聽 || 發現對象內部值的變化
        immediate: true, //當值第一次綁定的時候，觸發執行監聽函數
    }
}		

computed: { //只有固定的函數，不能重新賦值 get
    fullName: {
        get(){
            return (this.row) ? this.row.type : '';
        },
        set(value){
            this.firstName = value[0];
            this.lastName = value[1];
        }
    }
},

要點

• 監聽對象時屬性必須優先定義

  對象參數賦值時，當屬性發生變化，必須將該屬性進行定義才能監聽到

• props改變時涉及的值要改變時 盡量使用computed

Computed 的工作流程

• https://segmentfault.com/a/1190000010408657 - 深入理解 Vue Computed 計算屬性

1. data 屬性初始化 getter setter
2. computed 計算屬性初始化，提供的函數將用作屬性 vm.reversedMessage 的 getter
3. 當首次獲取 reversedMessage 計算屬性的值時，Dep 開始依賴收集
4. 在執行 message getter 方法時，如果 Dep 處於依賴收集狀態，則判定 message 為 reversedMessage 的依賴，並建立依賴關系
5. 當 message 發生變化時，根據依賴關系，觸發 reverseMessage 的重新計算