觀察屬性/計算屬性

我們在上面的範例中，用 jQuery 與 Vue.js 2實作了當我們的 DOM 有變動之時，要如何因應，接下來，我們要來針對當變數的內容有變動之時， 要如何因應

這是“觀察屬性”的用法

<div id="js-example-app">
    <input type="text" v-model="mobile" value="" />
    <div> {{ display }} </div>
</div>

new Vue ({
    el: '#js-example-app", /** 綁定要作用的DOM範圍 **/
    data: { /** 各綁定變數的初始值 **/
        mobile: '', /** 與 v-model = ”mobile“ 做綁定 **/
        display: '' /** 與 {{ display }} 做綁定 **/
    },
    watch: { /** 觀察變數的事件通通放在這 **/
        mobile: function(val) { /** 當mobile這個變數有變動之時… **/
            this.display = '您的手機是︰' + this.mobile;
        }
    }
});

這是“計算屬性"的用法

<div id="js-example-app">
    <input type="text" v-model="mobile" value="" />
    <div> {{ message }} </div>
</div>

new Vue ({
    el: '#js-example-app", /** 綁定要作用的DOM範圍 **/
    data: { /** 各綁定變數的初始值 **/
        mobile: '' /** 與 v-model = ”mobile“ 做綁定 **/
    },
    computed: { /** 新宣告的變數值通通放這 **/
        message: function(val) { /** 回傳 message 變數值到 {{ message }} **/
            return '您的手機是︰' + this.mobile;
        }
    }
});

發現觀察屬性與計算屬性的不同了嗎？沒錯，觀察屬性好比針對變數綁定onChange事件，而計算屬性好比我宣告了一個新的變數