vue計算屬性是什麼-Vue.js-PHP中文網

首頁

web前端

Vue.js

vue計算屬性是什麼

coldplay.xixi

Oct 10, 2020 pm 12:05 PM

vue計算屬性：在【Vue.js 0.12.8】版本之前，只要讀取對應的計算屬性，對應的getter就會重新執行。而在【Vue.js 0.12.8】版本中，在這方面進行了最佳化，即只有計算屬性所依賴的屬性值發生了改變時才會重新執行getter。

vue計算屬性是什麼

vue計算屬性：

一、計算屬性

計算屬性就是當其依賴屬性的值改變時，這個屬性的值會自動更新，與之相關的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:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        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:&#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]
                }
            }
        }
    })

登入後複製

當設定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:&#39;welcome to join didiFamily&#39;         
    },
   computed:{
        example:function(){
            return Date.now() + this.welcome    
         }       
     }  
})

登入後複製

　　我們需要在每次造訪example時都取得最新的時間而不是快取的時間。從Vue.js 0.12.11版本開始，預設提供了快取開關，在計算屬性物件中指定cache欄位來控制是否開啟快取。程式碼範例如下：

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

登入後複製

設定cache為false關閉快取之後，每次直接存取vm.example時都會重新執行getter方法。

三、常見問題

　　在實際開發中使用計算屬性時，我們會遇到各種各樣的問題，以下是蒐集到的一些常見問題以及解決方案。

計算屬性getter不執行的場景

　　從前面我們了解到，當計算屬性所依賴的資料屬性改變時，計算屬性的getter方法就會執行。但是在有些情況下，雖然依賴資料屬性發生了改變，但計算屬性的getter方法並不會執行。但是在有些情況下，雖然依賴資料屬性發生了改變，但計算屬性的getter方法並不會執行。

　　　　　　當包含計算屬性的節點被移除並且模板中其他地方沒有再引用該屬性時，那麼對應的計算屬性的getter方法不會執行。程式碼範例如下：

<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
            }
        }
    })

登入後複製

當點選按鈕使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:&#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
                    }
                }, 
            }
        }
    })

登入後複製

在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:&#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
                    }
                }, 
            }
        }
    })

登入後複製