Vue计算属性和监听器

计算属性

模板内使用计算属性是很方便的，设计的目的只是为了简单运算。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

{{message.split('').reverse().join('')}}

{{reverseMessage}}
computed: {
    
    reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

Computed VS Methods

我们可以使用方法达到和计算属性同样的效果
区别在于计算属性具有缓存，只有当计算属性所依赖的属性发生改变时，才会重新去计算，而方法每次都会去重新计算结果。

{{reverseMessage}}
{{_reverseMessage()}}
computed: {
    reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
},
methods: {
    _reverseMessage: function () {
        return this.message.split('').reverse().join('');
    }
}

Watch VS Computed

• watch

{{fullName}}
data: {
    firstName: "Foo",
    lastName: "Bar",
    fullName: ""
}
watch: {
    firstName: function (val) {
        this.fullName = val + " " + this.lastName;
    },
    lastName: function (val) {
        this.fullName = this.firstName + " " + val;
    }
}

• computed

{{fullName}}
data: {
    firstName: "Foo",
    lastName: "Bar",
    fullName: ""
}
computed: {
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}

watch是观察某一个属性的变化，重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值。
大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。

计算属性的Setter

计算属性默认只有get，在需要的时候也可以设置set方法

fullName: {
    get: function () {
        return this.firstName + " " + this.lastName;
    },
    set: function (val) {
        this.firstName = val.split(' ')[0];
        this.lastName = val.split(' ')[1];
    }
}