Vue.js 笔记02

发布于 2020-05-25  328 次阅读


关键词: 计算属性

计算属性

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

<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里的方法在每次被调用时都会重新执行一次。
基于它们两个的特性,可以合理安排不同场景下的实现方式。


何为BS?B-big,S-shui。