computed深入

計算屬性set/get

  • 計算屬性 (單向)

    在computed屬性對象中定義計算屬性的方法,在頁面使用{{方法名}}來顯示計算的結果

  • 監聽屬性 (單向)

    通過vm對象的$watch()或watch配置來監聽指定的屬性,當屬性變化時,回調函數自動調用,在函數內部進行計算。

  • 計算屬性高級 (雙向)

    通過geter/setter實現對屬性數據的顯示和監視,計算屬性存在緩存,多次讀取只執行一次getter計算。

const vm = new Vue({
        el: "#demo",
        data: {
            firstName: "A",
            lastName: "B",
            fullName2: "A-B"
        },
        computed: {
            fullName1() {
                return this.firstName + "-" + this.lastName;
            },
            fullName3: {
                // 回調函數:當讀取當前屬性值,根據相關數據變化 計算并返回當前屬性值
                get() {
                    return this.firstName + "-" + this.lastName;
                },
                // 回調函數: 監聽屬性值發生改變時回調,更新相關的屬性數據
                set(value) { //value 就是fullName3最新值
                    let name = value.split("-");
                    this.firstName = name[0];
                    this.lastName = name[1];
                }
            }
        },
        watch: {
            firstName(newValue, oldValue) {
                this.fullName2 = newValue + "-" + this.lastName;
            },
            lastName(newValue, oldValue) {
                this.fullName2 = this.firstName + "-" + newValue;
            }
        }
    })

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容