Vue入门详解之计算属性，方法和侦听器
对于存在一个姓氏和名字,我们通过Vue计算出姓名有三种方式,计算属性,方法(methods)和侦探器三种方式!
那么这三者有何差异,性能又如何呢?我们来对比一下!
首先我们使用前期较为熟悉的methods来实现
methods实现
前台我们使用插值表达式来调取这个methods方法:
<div id="app">{{full()}},年龄:{{age}}</div>
js代码
var app=new Vue({
el:"#app",
data:{
firstName:"Jack",
lastName:"Ma",
age:"18"
},
methods:{
full:function(){
console.log("触发一次,来自methods")
return this.firstName+" "+this.lastName;
}
}
})前台是够完整的进行输出这个姓名的,如果我文通过app对象修改model(数据层),无论修改关联的数据还是无关的age,都会触发这个methods方法!这个不存在缓存机制,每次修改就会调取这个方法!性能上不是很可以!
计算属性实现
我们可以定义一个computed,来调取这个进行计算
<div id="app">{{fullc}},年龄:{{age}}</div>
<script>
var app=new Vue({
el:"#app",
data:{
firstName:"Jack",
lastName:"Ma",
fullName:"Jack Ma",
age:"18"
}
computed:{
fullc:function(){
console.log("触发一次,来自计算属性")
return this.firstName+ " " +this.lastName;
}
}
})
</script>我们无论修改lastName,还是firstName都会触发这个计算属性,但是我们进行修改无关变量age的时候,我们则不会重新调取这个计算属性!发现这个computed是有缓存机制的!
侦探器watch实现
除了上述的两种方式外,还有一种侦探器方式,需要定义在watch对象中,下面我们使用watch实现一下
<div id="app">{{fullName}},年龄:{{age}}</div>
<script>
var app=new Vue({
el:"#app",
data:{
firstName:"Jack",
lastName:"Ma",
fullName:"Jack Ma",
age:"18"
}
watch:{
firstName:function(val){
console.log("触发一次,来自侦探器")
this.fullName=val + " "+this.lastName;
},
lastName:function(val){
console.log("触发一次,来自侦探器")
this.fullName=this.firstName+" "+val;
}
}
})
</script>通过上述方式我们测试得出这个侦探器实现,测试得出这个也是存在缓存机制的.
小结
那么对比一下,我们很容易得出computed(计算属性)和watch(侦探器)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?上述很容易得出侦探器比computed复杂的多!因此在一个项目同时可以使用计算属性,methods和侦探器实现时候我们优先使用计算属性其次是侦探器,最后选择methods!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录