Vue计算属性

Posted 2021-02-01 yc-1314

一、计算属性

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

代码如下:

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:‘#example‘,
        data:{
            didi:‘didi‘,
            family:‘family‘
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                <!-- this指向vm实例 -->
                return this.didi+this.family
            }
        }
    })

　　当vm.didi和vm.family的值发生变化时，vm.didiFamily的值会自动更新，并且会自动同步更新DOM部分。

　　前面实例只提供了getter，实际上除了getter。我们还可以设置计算属性的setter。代码示例如下:

　　

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:‘#example‘,
        data:{
            didi:‘didi‘,
            family:‘family‘
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                get:function(){
                    <!-- this指向vm实例 -->
                    return this.didi+this.family
                },
                <!-- 一个计算属性的setter -->
                set:function(newVal){
                    var names = newVal.split(‘‘)
                    this.didi = names[0]
                    this.didi = names[1]
                }
            }
        }
    })

当设置vm.didiFamily的值时，vm.didi和vm.family的值也会自动更新。

二、计算属性缓存

　　计算属性的特性的确很诱人，但是如果在计算属性方法中执行大量的耗时操作，则可能会带来一些性能问题。例如，在计算属性getter中循环一个大的数组以执行很多操作，那么当频繁调用该计算属性时，就会导致大量不必要的运算。

　　在Vue.js 0.12.8版本之前，只要读取相应的计算属性，对应的getter就会重新执行。而在Vue.js 0.12.8版本中，在这方面进行了优化，即只有计算属性依赖的属性值发生了改变时才会重新执行getter。

　　这样也存在一个问题，就是只有Vue实例中被观察的数据属性发生了改变时才会重新执行getter。但是有时候计算属性依赖实时3的非观察数据属性。代码示例如下：

var vm = new Vue({
   data:{
       welcome:‘welcome to join didiFamily‘         
    },
   computed:{
        example:function(){
            return Date.now() + this.welcome    
         }       
     }  
})    

　　我们需要在每次访问example时都取得最新的时间而不是缓存的时间。从Vue.js 0.12.11版本开始，默认提供了缓存开关，在计算属性对象中指定cache字段来控制是否开启缓存。代码示例如下：

var vm = new Vue({
   data:{
       welcome:‘welcome to join didiFamily‘         
    },
   computed:{
        example:function(){
            //关闭缓存，默认为true
            cache:false,
            get:function(){
             return Date.now() + this.welcome               
             }      
         }       
     }  
})      

设置cache为false关闭缓存之后，每次直接访问vm.example时都会重新执行getter方法。

三、常见问题

　　在实际开发中使用计算属性时，我们会遇到各种各样的问题，以下是搜集到的一些常见问题以及解决方案。

1. 计算属性getter不执行的场景
   　　从前面我们了解到，当计算属性依赖的数据属性发生改变时，计算属性的getter方法就会执行。但是在有些情况下，虽然依赖数据属性发生了改变，但计算属性的getter方法并不会执行。但是在有些情况下，虽然依赖数据属性发生了改变，但计算属性的getter方法并不会执行。

　　　　　　当包含计算属性的节点被移除并且模板中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行。代码示例如下：

　　

<div id="example">
        <button @click=‘toggleShow‘>Toggle Show Total Price</button>
        <p v-if="showTotal">Total Price = {{totalPrice}}</p>
    </div>
    new Vue({
        el:‘#example‘,
        data:{
            showTotal:true,
            basePrice:100
        },
        computed:{
            totalPrice:function(){
                return this.basePrice + 1
            }
        },
        methods:{
            toggleShow:function(){
                this.showTotal = !this.showTotal
            }
        }
    })

当点击按钮使showTotal为false，此时P元素会被移除，在P元素内部的计算属性totalPrice的getter方法不会执行。但是当计算属性一直出现在模板中时，getter方法还是会被执行

　　2.在v-repeat中使用计算属性

　　　　有时候从后端获得JSON数据集合后，我们需要对单条数据应用计算属性。在Vue.js 0.12之前的版本中，我们可以在v-repeat所在元素上使用v-component指令。代码示例如下：

　　

<div id="items">
        <p v-repeat="items" vue-component="item">
            <button>{{fulltext}}</button>
        </p>
    </div>

    var items = [
        {number:1,text:‘one‘},
        {number:2,text:‘two‘}
    ]
    var vue = new Vue({
        el:‘#items‘,
        data:{
            items:items
        },
        components:{
            item:{
               computed:{
                    fulltext:function(){
                        return ‘item‘ +this.text
                    }
                }, 
            }
        }
    })

在Vue.js 0.12版本中，Vue.js废弃了v-component指令，所以我们需要使用自定义元素组件来实现在v-repeat中使用计算属性。代码示例如下：

<div id="items">
        <my-item v-repeat="items" inline-template>
            
        </my-item>
    </div>

    var items = [
        {number:1,text:‘one‘},
        {number:2,text:‘two‘}
    ]
    var vue = new Vue({
        el:‘#items‘,
        data:{
            items:items
        },
        components:{
            ‘my-item‘:{
               replace:true, 
               computed:{
                    fulltext:function(){
                        return ‘item‘ +this.text
                    }
                }, 
            }
        }
    })