Vue的计算属性-创新互联

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

成都创新互联公司主营官渡网站建设的网络公司,主营网站建设方案,成都app开发,官渡h5微信小程序开发搭建,官渡网站营销推广欢迎官渡等地区企业咨询

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






a={{ a }},b={{ b }},c={{ c }}

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

文章题目：Vue的计算属性-创新互联
网页路径：http://cqcxhl.com/article/phdhh.html

重庆分公司，新征程启航

Vue的计算属性-创新互联

其他资讯