vue.js 计算属性与$watch的区别?-前端-E先生的博客

　　通俗来讲，既能用computed实现又可以用watch监听来实现的功能，推荐用computed，重点在于computed的缓存功能

　　computed计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；

　　watch监听的是已经在data中定义的变量，当该变量变化时，会触发watch中的方法；

　　设计模式不同

　　Computed是一种声明式的解决方案，我们只需要告诉vue某个属性的构成方法，就可以一劳永逸的放手不管了。

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

　　Watch是一种命令式的解决方案，我们需要自己处理vue某个属性依赖要素的变化，根据变化重置这个属性。

　　watch: {

　　 firstName: function (val) {

　　 this.fullName = val + ' ' + this.lastName

　　 },

　　 lastName: function (val) {

　　 this.fullName = this.firstName + ' ' + val

　　 }

　　}

　　因此，个人十分享受Computed，甚至不惜使用vue-async-computed来实现异步下的Computed。

asyncComputed: {
async someCalculation () {
const x = await someAsycFunction()

const y = await anotherAsyncFunction()

return x + y

}

}

　　响应行为不同

　　Computed的响应是deep的响应，即在计算过程中用到的对象的属性发生变化，是可以被监听到的。

computed: {

fullName: function () {

// this.name 的属性 firstName/lastName 变化时 fullName 会响应。

return this.name.firstName + ' ' + this.name.lastName

}

}

　　然而，一旦Computed没有在模板中使用，vue是不会为我们计算Computed内容的。

　　Watch的响应默认为非deep的响应，即观测的是某个对象的字面量。当然，我们可以为Watch设置deep响应类型或是监听其属性。