计算属性

Posted qt2019

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了计算属性相关的知识,希望对你有一定的参考价值。

计算属性

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

以上是关于计算属性的主要内容,如果未能解决你的问题,请参考以下文章

将多个输出中的hls属性设置为单独的片段代码

光栅化插值方法

创建自己的代码片段(CodeSnippet)

如何将 View 类中的代码片段移动到 OnAppearing() 方法?

HTTP客户端代码片段

js代码片段