1.計(jì)算屬性

為避免模板內(nèi)嵌表達(dá)式過于復(fù)雜應(yīng)使用計(jì)算屬性代替

<div>{{myMessage}}</div>

var app = new Vue({
    el: "#app",
    data: {
        message: "lulu"
    },
    computed:{
        //聲明一個(gè)計(jì)算屬性myMessage
        myMessage: function () {
            //聲明依賴message，易于測(cè)試推理
            return this.message.toUpperCase();
        }
    }
});

• 計(jì)算屬性基于其依賴進(jìn)行緩存，只有在依賴發(fā)生改變時(shí)才會(huì)重新求值，優(yōu)于使用method
• 當(dāng)有一些數(shù)據(jù)需要隨其他數(shù)據(jù)變動(dòng)時(shí)，優(yōu)于使用watch

計(jì)算屬性默認(rèn)只有g(shù)etter,但也可以添加setter

var app = new Vue({
    el: "#app",
    data: {
        message: "lulu",
    },
    computed: {
        myMessage: {
            // getter
            get: function () {
                return this.message.toUpperCase();
            },
            // setter
            set: function (newValue) {
                this.message = newValue;
            }
        }
    }
});
//設(shè)置計(jì)算屬性myMessage導(dǎo)致message更新
app.myMessage = "lululu";

2.觀察者watch

Vue通過watch提供一個(gè)更通用的方法，響應(yīng)數(shù)據(jù)變化

var app = new Vue({
    el: "#app",
    data: {
        message: "",
        searchKey: ""
    },
    watch: {
        //searchKey變化就會(huì)執(zhí)行函數(shù)
        searchKey: function (newValue) {
            this.message = "Waiting...";
            //一個(gè)異步或開銷較大的操作,計(jì)算屬性無法做到
            this.search();
        }
    },
    methods: {
        search: _.debounce(function(){
        }, 500)
    }
});