计算属性

1.1 什么是计算属性:

插值表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,这时应该使用计算属性。

插值表达式里的值是js表达式

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

 <!-- 
        将123,456 值反转 456,123 
    -->
    <div id="app">
        <!-- 插值表达式用法 -->
        {{ text.split(',').reverse().join(',') }}
        <!-- 插值表达式用法 -->

        <!-- 计算属性用法 -->
        {{ reversedtext }}
        <!-- 计算属性用法 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
         var vm = new vue({
             el:'#app',
             data:{
                 text:'123,456'
             },
             computed: {
                 reversedtext:function(){
                     return this.text.split(',').reverse().join(',');
                 }
             },
         });
    </script>

1.2 计算属性的用法

在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数等,只要最终返回一个结果就可以。

计算属性可以以来多个vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。

 <div id="app">
        总价:{{ prices }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
         var vm = new vue({
             el:'#app',
             data:{
                package1:[
                    {
                        name:'iphone 7',
                        price:7199,
                        count:2
                    },
                    {
                        name:'ipad',
                        price:2888,
                        count:1
                    },
                    {
                        name:'iphone 7 plus',
                        price:8239,
                        count:5
                    }
                ],
                package2:[
                    {
                        name:'apple',
                        price:3,
                        count:5
                    },
                    {
                        name:'banana',
                        price:2,
                        count:10
                    }
                ]
             },
             computed: {
                prices:function(){
                    let prices = 0;
                    for(let i = 0;i<this.package1.length;i++){
                        prices += this.package1[i].price * this.package1[i].count;
                    }
                    for(let i = 0;i<this.package2.length;i++){
                        prices += this.package2[i].price * this.package2[i].count;
                    }
                    return prices;
                }
             },
         });
    </script>

我们在控制台 vm.package1[0].count = 3; 总价的值就会相应的改变

每一个计算属性都包含一个getter和一个setter,上面都是计算属性的默认用法,只是利用了getter来读取。

<div id="app">
        姓名:{{ fullname }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
         var vm = new vue({
             el:'#app',
             data:{
                firstname:'jack',
                lastname:'green'
             },
             computed: {
                fullname:{
                    get:function(){
                        return this.firstname+' '+this.lastname;
                    },
                    set:function(newvalue){
                        let names = newvalue.split(' ');
                        this.firstname = names[0];
                        this.lastname =names[names.length - 1];
                    }
                }
             },
         });
    </script>

在你需要时,也可以提供一个setter函数,当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter函数,执行一些自定义的操作。

app.fullname = 'ross joe';

<div id="app">
        姓名:{{ fullname }}
        复姓:{{ fxname }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
         var vm = new vue({
             el:'#app',
             data:{
                firstname:'jack',
                lastname:'green'
             },
             computed: {
                fullname:{
                    get:function(){
                        return this.firstname+' '+this.lastname;
                    },
                    set:function(newvalue){
                        let names = newvalue.split(' ');
                        this.firstname = names[0];
                        this.lastname =names[names.length - 1];
                    }
                },
                 fxname:function(){
                     return 'zhuge '+this.fullname;
                 }
             },
         });
    </script>

计算属性可以依赖其他计算属性

   <div id="app1">    
    </div>
    
    <div id="app2">    
        {{ reversedtext }}
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app1 =new vue({
            el:'#app1',
            data:{
                text:'123,456'
            }
        });

        var app2 =new vue({
            el:'#app2',
            computed: {
                reversedtext:function(){
                   return app1.text.split(',').reverse().join(',');
                }
            },
        });
    </script>

计算属性可以依赖当前vue实例的数据,还可以依赖其他实例的数据

这样的用法在组件和组件话里会用到

1.3 计算属性缓存

<div id="app">
        <!-- 插值表达式用法 -->
        {{ text.split(',').reverse().join(',') }}
        <!-- 插值表达式用法 -->

        <!-- 计算属性用法 -->
        {{ reversedtext }}
        <!-- 计算属性用法 -->

        <!-- 方法用法 -->
        {{ reversedmtext() }}
        <!-- 方法用法 -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
         var vm = new vue({
             el:'#app',
             data:{
                 text:'123,456'
             },
             methods:{
                reversedmtext(){
                    return this.text.split(',').reverse().join(',');
                }
             },
             computed: {
                 reversedtext:function(){
                     return this.text.split(',').reverse().join(',');
                 }
             }
         });
    </script>

methods里的方法与计算属性起到同样的作用，但是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时,它才会重新取值。methods则不同,只要重新渲染,它就会被调用,因此函数也会被执行。

使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存

参考:vue.js实战