ITPub博客

首页 > 应用开发 > Javascript > Vue的计算属性

Vue的计算属性

原创 Javascript 作者:山有木xi 时间:2020-06-01 09:06:39 0 删除 编辑

通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板的表达式存在过多的逻辑,就会变得臃肿不堪,可维护和可读性就会较差,因此,为了简化逻辑,当某个属性值依赖于其他属性的值时,就可以使用计算属性

来看一个简单的计算属性的例子

<div id="example">
<input type="text" v-model="a"/>
<input type="text" v-model="b"/>
<br>
a={{ a }},b={{ b }},c={{ c }}
</div>
var vm=new Vue({
el:"#example",
data:{
a:'a',
b:'b'
},
computed:{
c:{
get:function(){
return this.a+this.b
},
set:function(newVal){
var names=newVal.splite('')
this.a=names[0]
this.b=names[1]
}
}
}
})

在这个例子中,我们在html中只需要插入a,b,c即可,而背后的计算过程交由computed:计算属性来解决,当a和b的值发生改变时,c的值也会改变,而当我们的c发生改变时,相对于的a和b的值也会发生改变

这样看来,计算属性的使用还是很舒服的,但是如果再计算属性方法中执行大量的耗时操作,就可以会带来一些性能问题,比如说:在计算属性getter中循环一个大的数组以执行很多操作,那么当频繁调用该计算属性时,就会导致大量不必要的运算

在早期的Vue中,只要读取相对于的计算属性,就要执行一遍getter,但是在现在的Vue中,只有计算属性依赖的属性值发生改变才会执行新的getter

这就要说到计算属性和方法的区别:计算属性的缓存,基于依赖进行的缓存。即,当程序所依赖的观察数据属性发生改变之后,才重新执行getter,否则有缓存可以节省性能

只是这样也有一个问题,只有Vue实例中被观察的数据属性发生了改变时才会重新执行getter,但是有时候计算属性依赖实时的非观察数据属性(例如最新的时间),所以Vue提供了缓存开关(关键词:cache),当我们将cache设为false时,每次执行都要重新执行一遍getter

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69917874/viewspace-2695371/,如需转载,请注明出处,否则将追究法律责任。

全部评论
Oracle OCA(Java),IBM高级工程师认证,中国软件行业人才(高级c语言),高级Android工程师,对数据库并发与性能调优也有一定了解

注册时间:2019-04-25

  • 博文量
    83
  • 访问量
    235578