Vue.js 笔记02

关键词： 计算属性

计算属性

若直接在模板中书写一些表达式，如果表达式过于长，或逻辑过于复杂时，会显得十分臃肿与难以维护，例如：

<span>{{text.split(",").reverse().join(",")}}</span>

在这里同时用到了多个对text的操作，条理看起来并不清晰，所以在遇到复杂情况时应该使用计算属性

<div id="app">
    {{reverseText}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                text:'123,asd'
            },
            computed:{
                reverseText(){
                    return this.text.split(",").reverse().join(",")
                }
            }
    })
</script>

所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算后的结果

计算属性的用法

在一个计算属性里可以完成各种复杂的逻辑，包括运算和函数调用等，但最终必须返回一个结果。计算属性还可以同时依赖多个Vue实例的数据，只要它们其中任意一个发生了变化，计算属性将会重新执行，视图也会随之更新。例如：

<div id="app">
    {{addAll}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                a:100,
                b:200
            },
            computed:{
                addAll(){
                    var sum = 0;
                    sum = this.a + this.b;
                    return sum;
                }
            }
    })
</script>

在以上计算属性addAll中，返回值sum是由data中a和b的值共同决定的，如果在某一时刻a或b的值发生了改变，则addAll方法会再次执行，并将更新后的数据更新到插值表达式上

计算属性的getter和setter

每一个计算属性都包换一个getter和一个setter，默认情况下提供的是getter，如果需要，也可以提供一个setter函数，当需要像修改普通数据那样手动修改计算属性的值时，就会触发setter函数，执行函数内的操作，如：

<div id="app">
    {{fullName}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
            data:{
                firstName:'Zhang',
                lastName:'San'
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName+' '+this.lastName;
                    },
                    set(newValue){
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length-1];
                    }
                }
            }
    })
</script>

当执行app.fullName("Li Si")时，setter就会被触发，根据相应规则更新数据并重新更新视图

计算属性还有一些其他小技巧，比如计算属性可以依赖其他计算属性，又比如计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据

计算属性缓存

计算属性能办到的事情，在methods中写相似的方法也同样能办到，那为什么还需要单独使用计算属性呢？

原因是因为，计算属性是依赖缓存的，一个计算属性所以来的数据发生变化时，它才会重新取值。而methods里的方法在每次被调用时都会重新执行一次。
基于它们两个的特性，可以合理安排不同场景下的实现方式。