描述
fullName和myName都是由firstName和lastName组成的全名,现在我们希望fullName和myName随着firstName和lastName的变化而改变。
代码实现
<template>
<div>
<input v-model="firstName" />
<input v-model="lastName" />
<p>{{fullName}}</p>
<p>{{myName}}</p>
<button @click="getFullName">点击</button>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "Foo",
lastName: "Bar",
fullName: "Foo Bar"
};
}
methods: {
getFullName() {
alert(this.firstName + " " + this.lastName);
}
},
watch: {
firstName: function(val) {
console.log(val);
this.fullName = val + " " + this.lastName;
}
//注释掉对lastName的监听,观察fullName和myName的变化
// lastName: function(val) {
// this.fullName = this.firstName + " " + val;
// }
},
computed: {
myName: function() {
return this.firstName + " " + this.lastName;
}
}
};
</script>
初始化时的值:
修改firstName以及lastName:watch没有监听lastName,所以fullName的lastName部分未改变;
点击按钮触发方法:方法需要主动调用才能触发。
总结
computed和method的区别
1.使用method函数,是需要主动调用的;computed和watch,会自动调用
2.method函数,每次调用都执行一次;computed是基于它们的响应式依赖进行缓存的
watch和computed的区别
1.watch监听一个数据,可以影响多个数据;而computed可以同时监听多个数据,只影响一个数据;
2.使用watch时,属性名为需要监听的变量,随着变动的fullName需要在data中定义;使用computed时,属性名为随着变动的myName,变量名不可以在data中定义。
3.不支持异步,当computed内有异步操作时无效,无法监听数据的变化