文章目录
computed与watch的异同不同点相同点 示例源码结果分析computed与watch的异同
不同点
触发条件不同computed计算属性会依赖于使用它的data属性，只要是依赖的data属性值有变动，则自定义重新调用计算属性执行一次。
watch则是在监控的data属性值发生变动时，其会自动调用watch回调函数。
执行速度不同
computed计算属性的值是直接从缓存中获取，而不是重新编译执行一次，因而其性能要高一些，尤其是在data属性中的值无变化，而重复调用computed回调函数时更是如此，所以说在Vue中，应该尽可能的多使用computed替代watch。
watch中的值需要data属性重新编译执行，因而其性能方面会有所损失。
使用方式不同
computed计算属性的回调函数方法可以直接在页面中通过插值表达式——{{}}来获取。此时我们不需要再data数据域中再定义一个与方法名相同的属性。
watch中的方法名必须是data数据域中所存在的，否则无法使用。
相同点
都可以实现通过监控data数据域中属性值的变化来触发相应的回调函数，进而实现我们特殊的逻辑业务处理功能。
示例
源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue-router</title></head><body><div id="app"><input type="text" v-model="lastName" placeholder="姓"><input type="text" v-model="firstName" placeholder="名"><h2>拼接：{{fullName}}</h2></div></body><script src="../../../js/vue/vue/2.0/vue.js"></script><script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script><script type="application/javascript">new Vue({el:'#app',data:{firstName:'',lastName:''},computed:{fullName:function () {return this.lastName + '·' + this.firstName;}}});</script></html>
结果
分析
通过上述代码，我们可以看到，我们仅仅在computed回调函数域中定义了一个fullName回调函数，当我们的函数所依赖的data属性中的值有变动时，其会自动触发fullName回调函数，重新计算一下结果，因而其使用方式相较于watch而言，要简练很多。
computed回调函数域中的回调函数方法可以在插值表达式{{}}中直接获取返回结果而无需在data数据域中定义相关的属性，这一点相较于watch中而言使用起来也更方便些。
