What are vue computed properties?

vue computed properties: Before the [Vue.js 0.12.8] version, as long as the corresponding computed property is read, the corresponding getter will be re-executed. In the [Vue.js 0.12.8] version, this aspect has been optimized, that is, the getter will be re-executed only when the attribute value on which the calculated attribute depends has changed.

vue computed properties:

1. Computed properties

A computed property means that when the value of its dependent property changes, the value of this property will be automatically updated, and the related DOM part will also be automatically updated simultaneously.

The code is as follows:

<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:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                <!-- this指向vm实例 -->
                return this.didi+this.family
            }
        }
    })

When the values ​​of vm.didi and vm.family change, the value of vm.didiFamily will be automatically updated, and the DOM part will be automatically updated synchronously.

The previous example only provides getters, in fact, in addition to getters. We can also set setters for computed properties. The code example is as follows:

<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:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                get:function(){
                    <!-- this指向vm实例 -->
                    return this.didi+this.family
                },
                <!-- 一个计算属性的setter -->
                set:function(newVal){
                    var names = newVal.split(&#39;&#39;)
                    this.didi = names[0]
                    this.didi = names[1]
                }
            }
        }
    })

When the value of vm.didiFamily is set, the values ​​of vm.didi and vm.family will also be automatically updated.

2. Calculated property caching

The features of calculated properties are indeed very attractive, but if a large number of time-consuming operations are performed in the calculated property method, it may cause problems. Here comes some performance issues. For example, looping over a large array to perform many operations in a computed property getter will result in a lot of unnecessary operations when the computed property is called frequently.

Before Vue.js version 0.12.8, as long as the corresponding calculated property is read, the corresponding getter will be re-executed. In Vue.js version 0.12.8, this aspect has been optimized, that is, the getter will be re-executed only when the property value on which the calculated property depends has changed.

There is also a problem, that is, the getter will be re-executed only when the observed data attribute in the Vue instance changes. But sometimes computed properties rely on real-time 3 non-observable data properties. The code example is as follows:

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

We need to get the latest time every time we access example instead of the cached time. Starting from Vue.js version 0.12.11, a cache switch is provided by default. Specify the cache field in the calculated attribute object to control whether to enable caching. The code example is as follows:

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

After setting cache to false to turn off the cache, the getter method will be re-executed every time vm.example is accessed directly.

3. Frequently Asked Questions

When using calculated properties in actual development, we will encounter various problems. The following are some common problems collected. and solutions.

Scenarios where the computed attribute getter is not executed

From the previous point we learned that when the data attribute that the computed attribute depends on changes, the getter method of the computed attribute will be executed. But in some cases, although the dependent data attribute has changed, the getter method of the calculated attribute will not be executed. But in some cases, although the dependent data attribute has changed, the getter method of the calculated attribute will not be executed.

　　　　　When the node containing the computed attribute is removed and the attribute is no longer referenced elsewhere in the template, the corresponding getter method of the computed attribute will not be executed. The code example is as follows:

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

When the button is clicked to set showTotal to false, the P element will be removed, and the getter method of the calculated attribute totalPrice inside the P element will not be executed. But when the calculated attribute always appears in the template, the getter method will still be executed

　2. Using calculated attributes in v-repeat

Sometimes after obtaining the JSON data collection from the backend, We need to apply computed properties to a single piece of data. In versions before Vue.js 0.12, we can use the v-component directive on the element where v-repeat is located. The code example is as follows:

<div id="items">
        <p v-repeat="items" vue-component="item">
            <button>{{fulltext}}</button>
        </p>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            item:{
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

In Vue.js 0.12 version, Vue.js abandoned the v-component directive, so we need to use custom element components to implement calculated properties in v-repeat. The code example is as follows:

<div id="items">
        <my-item v-repeat="items" inline-template>
            
        </my-item>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            &#39;my-item&#39;:{
               replace:true, 
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

Related free learning recommendations: js video tutorial

The above is the detailed content of What are vue computed properties?. For more information, please follow other related articles on the PHP Chinese website!