VUE-计算属性 vs Watched Property

Vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。思考下面例子：

<div id="demo">{{ fullName }} </div>

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } })

上面代码是命令式的和重复的。跟计算属性对比：

var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })

开头用红色部分注明的当一些数据需要根据其它数据变化时，更适合使用的是计算属性而不是$watch回调，因为计算属性本质就是基于一些数据计算后的结果，在这个例子中因为需要的数据是fullName,所以并不需要单独监听两个数据firstName,lastName的变化再计算fullName,而是直接用computed来完成更加简便，只要其中数据变化，计算属性也会相应改变。 但是并不是说watch机制就没有用了，上面的例子只是特例，当一些数据需要根据其它数据变化时使用。 正常情况下我们一般不会使用回调函数来做计算并显示。有可能是为了监测是否出现异常等情况，所以$watch的存在是必要的，重要的！

计算 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split( ' ')// 有些人看到这里可能会觉得很怪异，分号呢？我刚开始也是这样，因为以前写JAVA.PHP的时候习惯性写法。 //然而现在的编译器是很强大的，系统会帮你添加末尾分号（在你没写的情况下），Vue的源代码都是没有分号的，个人喜好吧，虽然这样看上去蛮简洁的，但有 //分号更加严谨一点 this.firstName = names[ 0] this.lastName = names[names.length - 1] } } } // ...

现在在运行 vm.fullName = 'John Doe' 时， setter 会被调用， vm.firstName 和 vm.lastName 也会被对应更新。