一、通过案例对比computed和watch
姓名案例（输入框分别输入姓和名，全名展示姓名的组合）
1.通过computed实现
<body>
<div id="app">
姓：<input v-model="firstName" /><br /><br />
名：<input v-model="lastName" /><br /><br />
全名：<span>{{fullName}} </span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data() {
return {
firstName: "张",
lastName: "三",
};
},
computed: {
fullName() {
return this.firstName + "-" + this.lastName;
},
},
});
</script>
</body>
2.通过watch实现
<body>
<div id="app">
姓：<input v-model="firstName" /><br /><br />
名：<input v-model="lastName" /><br /><br />
全名：<span>{{fullName}} </span>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#app",
data() {
return {
firstName: "张",
lastName: "三",
fullName: "",
};
},
watch: {
firstName(val) {
this.fullName = val + "-" + this.lastName;
},
lastName(val) {
this.fullName = this.firstName + "-" + val;
},
},
});
</script>
</body>
二、总结computed和watch之间的区别
-
computed能完成的功能，watch都可以完成。
-
watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。
三、两个重要的小原则
-
- 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
-
- 所有不被vue所管理的函数 (定时器的回调函数、ajax的回调函数、Promise的回调函数等) ，最好写成箭头函数。这样this的指向才是vm或组件实例对象。
