Vue学习-第三章-计算属性

模板内的表达式常用于简单的运算，当其过长或逻辑复杂时，会难以维护，本章的计算属性就是用于解决该问题的。

3.1什么是计算属性

表达式如果过长，或逻辑更为复杂时，就会变得脯肿甚至难以阅读和维护，比如：

<div> 
{{ text.split(',').reverse().join (','))) 
</div> 

这里的表达式包含3个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上例可以用计算屈性进行改写：
 

<div id="app"> 
{{reversedText｝ 
</div> 
<script> 
var app = new Vue({
    el: '#app', 
    data: {
    text: '123,456'
},computed: {
    reversedText: function () {
    //这里的 this 指向的是当前的 Vue实例
    return this.text.split(',').reverse().join(',');
    }
}
})
</script>

3.2计算属性用法

 除了上例简单的用法，计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

3.3计算属性缓存

你可能发现调用方法里的方法也可以与计算属性起到同样的作用

 没有使用计算属性，在方法里定义了方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。既然使用方法就可以实现，那么为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的。计算属性所依赖的数据发生变化时，它才会重新取值

computed: {
now: function (){
return Date. now();
}
}

这里的Date.now（）不是响应式依赖，所以计算属性现在不会更新。但是方法则不同，只要重新渲染，它就会被调用，因此函数也会被执行。使用计算属性还是方法取决于你是否需要缓存，当遍历大数组和做大蜇计算时，应当使用计算属性，除非你不希望得到缓存。