Vue.js计算属性

变量在网页中是经常可能发生改变的，一种情况是程序内部让这个变量发生改变，另一种情况是网页用户让变量的值发生改变。不管是以什么样的方式修改了此变量的值，都有可能要根据这个变量产生的变化去联动产生其他效果变化，这里产生了两种情况，其他多个变量导致某个变量发生改变时，就用计算属性；，某个变量引起多个变量发生改变时，就使用侦听器。我们主要介绍一下计算属性。

计算属性

可以通过使用模板表达式进行简单的运算，但是如果在一个网页中满屏都是用模板逻辑，那么会让维护成本增加，不便于对代码进行调整。例如：

<div id="myCode">
  {{ text.split('').reverse().join('') }}
</div>
复制代码

在上面这段代码中，模板语法已经不再是简单的声明式逻辑。以上代码是要对text进行字符串反转，当要在其他位置引用这个反转后的结果时，就必须要重复写多个text.split('').reverse().join('')，这样严重增加了代码量，所以Veu.js引入了计算属性。

对于那些较为复杂且逻辑混乱还要重复多处引用的变量属性，建议使用计算属性。

计算属性缓存vs方法

有的人或许会疑惑，用方法不是也可以达到相同效果吗？例如：

<P>计算之后的反转text: "{{ reversedText() }}"</p>
//在组件中
methods: {
   reversedText() {
       return this.text.split('').reverse().join('');
   }
}
复制代码

可以发现，这两种代码书写方式都可以达到想要的效果，那么为什么要用计算属性呢？两种方式的最后结果确实是完全相同的，不过计算属性的结果存在于缓存中，即便是被多次使用只需要计算一次，而方法就不同了，被使用多少次就会被执行多少次，这样就带来了不必要的资源消耗。很明显，使用计算属性的结果，只要text没有发生任何改变，访问任意次reversedText计算属性，都会从上次计算的结果缓存中读取数据，而不是去运行计算方法一次。

new Date().getTime()不是响应式依赖，所以下面的计算属性不会再更新。

computed: {
  now: function() {
    return new Date().getTime();
  }
}
复制代码

这样一比较，当页面触发重新编译时，调用方法都会重新再次执行一次函数。那么，用计算属性就好的多，为什么需要用计算属性的缓存呢？例如，有一个资源非常好的功能模块需要大量的计算属性A,甚至于会导致存在一个庞大的for循环，如果不进行数据缓存，那么将可能成倍增加资源的消耗，有时甚至会明显感受到网页编译速度变迟缓了，所以有的放矢使用计算属性是很有必要的。