计算属性和观察者

1.计算属性

为避免模板内嵌表达式过于复杂应使用计算属性代替

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

var app = new Vue({
    el: "#app",
    data: {
        message: "lulu"
    },
    computed:{
        //声明一个计算属性myMessage
        myMessage: function () {
            //声明依赖message，易于测试推理
            return this.message.toUpperCase();
        }
    }
});

• 计算属性基于其依赖进行缓存，只有在依赖发生改变时才会重新求值，优于使用method
• 当有一些数据需要随其他数据变动时，优于使用watch

计算属性默认只有getter,但也可以添加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;
            }
        }
    }
});
//设置计算属性myMessage导致message更新
app.myMessage = "lululu";

2.观察者watch

Vue通过watch提供一个更通用的方法，响应数据变化

var app = new Vue({
    el: "#app",
    data: {
        message: "",
        searchKey: ""
    },
    watch: {
        //searchKey变化就会执行函数
        searchKey: function (newValue) {
            this.message = "Waiting...";
            //一个异步或开销较大的操作,计算属性无法做到
            this.search();
        }
    },
    methods: {
        search: _.debounce(function(){
        }, 500)
    }
});