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

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

浏览器访问：

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

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

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

浏览器访问：

注意

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

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

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

只读的计算属性

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

浏览器访问：

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

Vue.js连载为卓象程序员原创，转载请联系卓象程序员

关注卓象程序员，定期发布技术文章

下一篇讲解“vue.js观察者”