一、通过案例对比computed
和watch
姓名案例(输入框分别输入姓和名,全名展示姓名的组合)

1.通过computed
实现
xml
<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
实现
xml
<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或组件实例对象。