对于刚开始学习Vue的开发者来说,十分容易混淆Vue中计算属性、方法和侦听属性,希望通过本文的介绍,我们可以浅层次了解三者区别。
1,首先上代码展示:
<body>
<div id="app">
<h1>计算属性:computed</h1>
{{fullName}}
<h1>方法:methods</h1>
{{fullName2()}}
<h1>侦听器:watch</h1>
{{watchFullName}}
<h1>年龄:age</h1>
{{age}}
</div>
<script>
var other = 'This is other';
const vm = new Vue({
el: '#app',
data() {
return {
firstName: "zhang",
lastName: "san",
watchFullName: "zhangsan",
age: 18,
}
},
methods: {
fullName2() {
console.log('调用fullName2,使用了一次方法');
return this.firstName + this.lastName + ',' + other;
}
},
computed: {
fullName() {
console.log('调用fullName,计算一次属性');
return this.firstName + this.lastName + ',' + other
}
},
watch: {
firstName(val) {
console.log('调用watchFullName,使用了一次监听');
this.watchFullName = this.firstName + this.lastName + "," + other
},
lastName(val) {
console.log('调用watchFullName,使用了一次监听');
this.watchFullName = this.firstName + this.lastName + "," + other
}
}
})
</script>
</body>
1,1控制台看效果:第一次,无任何修改
1.2 控制台看效果:第二次,修改firstName
1.3 控制台看效果:第三次,修改age
1.4 控制台看效果:第四次,修改other
1.5 控制台看效果:第五次,修改firstName
1.6测试结论:
- 使用computed计算了fullName属性,值为firstName+lastName。计算属性具有,当firstName和lastName都不改变的时候,fullName不会重新计算,比如我们改变age的值,fullName的值是不需要重新计算的。
缓存功能
- methods并没有缓存特性,比如我们改变age的值,fullName2()方法会被执行一遍。
- 当一个功能可以用上面三个方法来实现的时候,明显使用computed更合适,代码简单也有缓存特性。
- 计算属性范围在vue实例内,修改vue实例外部对象,不会重新计算渲染,但是如果先修改了vue实例外对象,在修改vue计算属性的对象,那么外部对象的值也会重新渲染。
1.7 总结:
1,计算属性computed是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求值。只要相关依赖未改变,只会返回缓存中的结果,不会执行函数。
而methods,只要调用它,函数就会执行
2, computed和watch的区别
computed可以观察多个数据,watch只能是一个数据
computed生成一个新的数据,直接渲染至视图中,watch是修改本身已经存在的数据
computed不可以执行异步的,因为需要返回值,返回值是由js主线程控制,watch可以执行异步的,因为不需要返回数据,定时器是属于异步的线程
<script>
const vm = new Vue({
el: '.app',
data() {
return {
fristName: '张',
lastName: '三',
fullName:'张三'
}
// return {
// isHot: true,
// }
},
// 总结:计算属性里不能完成异步任务
// computed: {
// fullName(){
// setTimeout (()=>{//定时器,等一些不被vue管理的回调函数为普通函数时,在vue里this指向window
// // 为箭头函数,this指向vm
// console.log(this);
// return this.fristName+'-'+this.lastName
// }, 2000);
// }
// },
watch: {//命令式监测,重复
fristName(val) {
setTimeout(() => {
console.log('2秒后我执行了');
this.fullName = val + '-' + this.lastName
}, 2000);
},
lastName(val){
setTimeout(() => {
console.log('两秒后我执行了');
this.fullName=this.fristName+'-'+val
}, 2000);
}
}
1.8 拓展:
所有被Vue管理的函数,要写成普通函数,this指向vm,不被vue管理的函数比如(定时器,ajax,promise等回调函数)写成箭头函数,目的是让this指向vm。