計算屬性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;
            }
        }
    })