欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

计算属性

程序员文章站 2022-06-01 08:50:35
计算属性 1.1 什么是计算属性: 插值表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护,这时应该使用计算属性。 插值表达式里的值是JS表达式 所有的计算属性都以函数的形式写在Vue实例内的computed选项内,最终返回计算后的结果。 1.2 计算属性的用法 在一个计算属性里可以完成各种复 ......

计算属性

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实战