「Vue.js开发连载十三」计算属性

原创 小伙子  2018-12-20 21:47:27  阅读 17 次 评论 0 条

上一篇文章讲解“vue.js指令v-pre+v-once”,本篇文章讲解“计算属性”。


模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

「Vue.js开发连载十三」计算属性


浏览器访问:

「Vue.js开发连载十三」计算属性


在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。

所以,对于任何复杂逻辑,你都应当使用计算属性。


【例】将字符串翻转功能使用计算属性实现。

「Vue.js开发连载十三」计算属性


浏览器访问:

「Vue.js开发连载十三」计算属性


注意

1. 每当this.message发生变化,reverseMessage会自动重新计算新值,绑定计算属性的元素也会响应变化。

2. 计算属性是通过函数定义的返回值。

当参与计算的属性没有发生变化,那么计算属性是自动缓存的,无论是在模板还是js中调用计算属性他都不会重新计算,这相比绑定表达式多次调用会被多次计算相比性能更优,试想想如果我们计算属性内部的逻辑是处理1000条产品信息。建议大家实际开发中优先使用计算属性。


只读的计算属性

刚刚我们说了计算属性是有返回值的函数,所以一般情况下它都是只读的,但是有些特殊情况也需要对计算属性赋值,这时候计算属性就不只是一个简单的有返回值的函数(Function)了,而是一个对象(Object),对象的get属性对应有返回值的函数,而set去响应对计算属性写的操作:

「Vue.js开发连载十三」计算属性


浏览器访问:

「Vue.js开发连载十三」计算属性


虽然可以对写操做进行响应,但是计算属性是只读的,所以在set中一般做的并不是去改变计算属性的值,而是去操作其他属性,比如自定义组件vmodel/vuex中都会经常用到这个set,现阶段只要知道有这个set就可以,后续章节会慢慢展开。


本文地址:http://linuxphp.cn/53.html
版权声明:本文为原创文章,版权归 小伙子 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?