版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83857747
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中而言使用起来也更方便些。