从品牌网站建设到网络营销策划,从策略到执行的一站式服务
通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板的表达式存在过多的逻辑,就会变得臃肿不堪,可维护和可读性就会较差,因此,为了简化逻辑,当某个属性值依赖于其他属性的值时,就可以使用计算属性
成都创新互联公司是网站建设专家,致力于互联网品牌建设与网络营销,专业领域包括成都网站制作、成都网站建设、电商网站制作开发、小程序制作、微信营销、系统平台开发,与其他网站设计及系统开发公司不同,我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念,并将策略和执行紧密结合,且不断评估并优化我们的方案,为客户提供全方位的互联网品牌整合方案!
来看一个简单的计算属性的例子
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] } } } })
a={{ a }},b={{ b }},c={{ c }}
在这个例子中,我们在html中只需要插入a,b,c即可,而背后的计算过程交由computed:计算属性来解决,当a和b的值发生改变时,c的值也会改变,而当我们的c发生改变时,相对于的a和b的值也会发生改变
这样看来,计算属性的使用还是很舒服的,但是如果再计算属性方法中执行大量的耗时操作,就可以会带来一些性能问题,比如说:在计算属性getter中循环一个大的数组以执行很多操作,那么当频繁调用该计算属性时,就会导致大量不必要的运算
在早期的Vue中,只要读取相对于的计算属性,就要执行一遍getter,但是在现在的Vue中,只有计算属性依赖的属性值发生改变才会执行新的getter
这就要说到计算属性和方法的区别:计算属性的缓存,基于依赖进行的缓存。即,当程序所依赖的观察数据属性发生改变之后,才重新执行getter,否则有缓存可以节省性能
只是这样也有一个问题,只有Vue实例中被观察的数据属性发生了改变时才会重新执行getter,但是有时候计算属性依赖实时的非观察数据属性(例如最新的时间),所以Vue提供了缓存开关(关键词:cache),当我们将cache设为false时,每次执行都要重新执行一遍getter
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图