本文章首更于掘金賬號，主要是為了方便自己以后復習和回憶，有錯誤或不合理之處還請大家指正。

計算屬性：computed

作用

• 減少模板中的計算邏輯
• 進行數據緩存
• 依賴固定的數據類型

使用

• 在computed屬性對象中定義計算屬性的方法
• 在頁面中使用{{方法名}}來顯示計算的結果
• 通過getter/setter實現對屬性數據的顯示和監視

注意點

• 計算屬性是基于它們的依賴進行緩存的，只有相關的依賴發生改變時才會重新求值。只要相關的依賴未改變，只會返回之前的結果，不會執行函數。
• computed依賴監控自己定義的變量，computed不能計算已經在data里面定義過的值，該變量在computed里面定義，然后可以在頁面上進行數據綁定
• computed比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化

實例

<template>
    <div>
        <label>姓：<input type="text" placeholder="請輸入姓氏" v-model="firstName"></label><br/>
        <label>名：<input type="text" placeholder="請輸入名字" v-model="lastName"></label>
        // 可以直接綁定計算屬性
        <label>姓 名：<input type="text" placeholder="請輸入姓名" v-model="fullName"></label>
    </div>
</template>

<script>
    export default {
        name: "ComputedAndWatch",
        data(){
            return {
                firstName:'',
                lastName:'',
            }
        },
        computed:{
            fullName:{
                get(){
                    return this.firstName + '·' + this.lastName

                }
            }
        }
    }

實現雙向綁定

set(value){
    console.log(`${value}`);        // 測試：使用字符串拼接只能使用“ ` ”
    let names = value.split('·');
    this.firstName = names[0];
    this.lastName = names[1];
}

使用場景

• computed擅長處理的場景：一個數據受多個數據影響

  
  
  image

偵聽器：Watch

作用

• 主要用于監控vue實例的變化，監控的變量必須在data里面聲明才可以
• 可以監控一個變量或者一個對象，但是只能監控整個對象或單個變量、
• 依賴于固定的數據類型（響應式數據）

使用

• 通過vm對象的$watch()或watch配置來監視指定的屬性
• 當屬性變化時，回調函數自動調用，在函數內部進行計算
• watch不能雙向的綁定值

實例

watch:{
    // 監聽firstName
    firstName(value){
        console.log(`watch監視到firstName發生改變：${value}`);
        //更新fullName
        this.fullName  = value + '·' + this.lastName
        },
    // 監聽lastName
    lastName(value){
        console.log(`watch監視到lastName發生改變：${value}`);
        this.fullName  = this.firstName + '·' + value
        }
    }

使用場景

• watch一般用于監控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個數據影響多個數據

image

總結

• 能用computed的地方，盡可能使用computed
• computed是計算一個新的屬性，并將該屬性掛載到vm上，而watch是監聽已經存在且已掛載VM上的數據，所以用watch同樣可以監聽computed計算屬性的變化
• computed本質上一個惰性求值的觀察者，具有緩存性，只有當依賴變化后，第一次訪問computed屬性，才會計算新的值，而watch則是當數據發生變化便會調用執行函數
• 從使用場景上說，computed使用一個數據被多個數據影響，而watch適用一個數據影響多個數據