vue - computed（計算屬性）

Vue.js

本章內容：

• 計算屬性
  • 簡寫方法和完整寫法
  • 計算屬性的特點
    

計算屬性

​ 計算屬性是對data中的數據進行依賴，在原有的數據上得出另一個結果。

簡寫方法和完整寫法

<div id="app">
    <button v-on:click="alter('hello')">修改</button>	
    {{resetStr1}}
    {{resetStr2}}
</div>

new Vue({
    el: "#app",
    data: {
        str1: "vuejs",
        str2: "vuejs"
    },
    methods: {
        alter(val) {
            this.resetStr2 = val;
        }  
    },
    computed: {
        // 計算屬性的簡寫方法，只能進行獲取，不能進行賦值修改。
        resetStr1() {
            return this.str1.substr(0, 1).toUpperCase() + this.str1.substr(1);
        },
        // 計算屬性的完整寫法，可以進行獲取或者修改。
        resetStr2() {
            get() {
                return this.str2.substr(0, 1).toUpperCase() + this.str2.substr(1);
            },
                set(val) {
                    this.str2 = val; // val是計算屬性設置的值,會自動映射到val形參
                }
        }
    }
})

計算屬性的特點

1. 函數的方式聲明，屬性方式的調用
2. 計算屬性方法中的this指向vue的實例（可以通過this訪問data中的數據）。
3. 計算屬性必須有return，並且return什麼，計算屬性的結果就是什麼。
4. 根據data中的依賴，進行緩存的，只要計算屬性的依賴不變，該計算屬性就不會再去執行，而至直接從緩存中取值（結果）。
5. 計算屬性只用於同步操作，不能進行異步操作。

---