Vue 計算屬性computed和監聽屬性watch比較

1、計算屬性

介紹：

• 避免在模板中使用冗余代碼處理data中的數據
• 當依賴的data對象中的屬性值發生變化時，將會觸發計算方法，在data對象中生成新的變量，並且會將新的變量緩存起來；（只要依賴的data對象屬性值不發生改變，將不會觸發計算方法；）
• 可以用計算屬性實現的，也就可以用方法methods實現，但是methods性能不如computed高；因為methods每次渲染后都會被調用，而computed只要響應式依賴(data中的屬性)沒有發生改變，將不會重新計算，並且計算后會重新被緩存；
• 同樣，可以用計算屬性實現的，也就可以用偵聽器watch實現，只要所依賴的相應數據不是頻繁變化，開銷不大的時候，就是用計算屬性，反之用監聽器；
• 計算屬性不需要再data中進行定義；

使用：

（1）、監聽firstName和lastName計算fullName

<template>
    <div>{{fullName}}</div>
</template>
<script>
    export default {
        data() {
            return { 
             firstName: "wang",
             lastName: "wu"
            }
        },
        computed: {
            fullName: function () { // 監聽data中的firstName和lastName值的變化, 得到新變量fullName，且fullName不需要再data中定義
                return this.firstName + "-" + this.lastName;
            }
        }
    }
</script>

（2）、使用setter和getter方法

<template>
    <div>firstName: {{firstName}}</div>
    <div>lastName: {{lastName}}</div>
    <div>{{fullName}}</div>
    <a @click="changeValue">更改</a>
</template>
<script>
    export default {
        data() {
            return {
            firstName: "wang",
            lastName: "wu"
    }
        },
        computed: {
            fullName: { // 監聽data中的firstName和lastName, 得到新變量fullName
               get: function() {
                    return this.firstName + "-" + this.lastName;
                } ,
                // set方法作用：通過參數修改計算的依賴屬性firstName和lastName值
                set: function(newValue) { 
                    this.firstName = newValue[0];
                    this.lastName = newValue[newValue.length-1];
                }
            }
        },
        methods:  {
            changeValue() {
                // 調用計算屬性的set方法，修改firstName和lastName
                this.fullName="yyyyy";
            }
        }
    }
</script>

2、偵聽器

介紹：

• 用於偵聽變化較為頻繁，開銷較大的數據；
• 監聽的變量需要在data中進行定義；

使用：

<template>
    <input type="text" v-model="question" />
</template>
<script>
    export default {
        data() {
            return {
            question: "",
            answer: ""
    }
        },
       watch: {
           question: function () { // 監聽question值的變化, 只要question發生變化，這個函數將會被執行；
                this.answer="---------------------";
                this.getAnswer();
            }
        },
        methods: function() {
            getAnswer() {
                console.log("question屬性值發生變化了。。。");
            }
        }
    }
</script>