Vue基礎之計算屬性

huaixiaoz 發布于2019-08-30 15:56 / 602人閱讀

摘要：計算屬性這時，我們就可以輕松應用結果在多個地方，而且代碼還看起來更清晰了。每個計算屬性都包括和，我們平時默認用到的是來讀取。計算屬性依賴的數據變化時，它才會重新取值，只要依賴數據不變化，它就不更新，可以緩存數據。

適用場景

設想一個場景，你需要得到一個復雜運算/邏輯的返回值，利用模板內的表達又過長且難以閱讀和維護，這時計算屬性就可以很好的解決你的問題。看下面的例子：




  
  
  
  computed
  


  
    {{message.split(" ").reverse().join(" ")}}

{{message.split(" ").reverse().join(" ")}}這個表達式共進行了三種操作，但看起來并不是很清晰，并且當我們想在其他地方也用到最終值時就需要復制、粘貼冗長的一大段代碼，所以這時候計算屬性就可以及時的發揮它巨大的作用。




  
  
  
  computed
  


  
    {{reverseText}}
    
    {{reverseText}}
    
    {{reverseText}}

這時，我們就可以輕松應用結果在多個地方，而且代碼還看起來更清晰了。

使用方法

在計算屬性computed里可以完成各種復雜的邏輯（運算、函數調用），所有的計算屬性以函數的形式寫在computed里，最終返回計算結果，當message（data數據）有任何變化，計算屬性會同時更新，并且更新視圖。

每個計算屬性都包括getter和setter，我們平時默認用到的是getter來讀取。




  
  
  
  computed
  


  
    姓：{{firstName}}
    
    名：{{lastName}}
    
    姓名：{{fullName}}

默認調用時是用fullName的getter方法讀取數據，想使用set方式時：


  姓：{{firstName}}
  
  名：{{lastName}}
  
  姓名：{{fullName = "一 枚蛋Oops"}}

計算屬性緩存

有人有可能會問，為什么不使用methods直接函數調用，這里就要區分一下他們的區別了

methods：只要重新渲染就會更新，函數就會執行。

computed：計算屬性依賴的數據變化時，它才會重新取值，只要依賴數據不變化，它就不更新，可以緩存數據。

所以到底使用哪個屬性是依據你的項目需求，看看你需不需要緩存。

以上是本期全部內容，欲知后事如何，請聽下回分解<(￣︶￣)↗[GO!]

云服務器 GPU云服務器 vue的計算屬性 vue實例屬性 vue.js 屬性之基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117531.html

# vue.js 之對vue.js基礎理解

摘要：之對基礎理解構造器是一個構造函數，編程中稱之為構造器每一個都是一個構造函數的實例，這個過程叫做實例化構造函數需要將其實例化后才會啟用構造器要求實例化時需要傳入一個選項對象組件其實都是被擴展的實例。 vue.js 之對vue.js基礎理解 Vue構造器 1 . Vue.js是一個構造函數，編程中稱之為構造器 2 . 每一個new Vue() 都是一個Vue構造函數的實例，這個過程叫...

Rainie 2019-08-20 19:04 評論0 收藏0
Vue基礎之計算屬性

摘要：計算屬性這時，我們就可以輕松應用結果在多個地方，而且代碼還看起來更清晰了。每個計算屬性都包括和，我們平時默認用到的是來讀取。計算屬性依賴的數據變化時，它才會重新取值，只要依賴數據不變化，它就不更新，可以緩存數據。適用場景設想一個場景，你需要得到一個復雜運算/邏輯的返回值，利用模板內的表達又過長且難以閱讀和維護，這時計算屬性就可以很好的解決你的問題。看下面的例子： ...

android_c 2019-08-02 14:30 評論0 收藏0
Vue基礎之計算屬性

摘要：計算屬性這時，我們就可以輕松應用結果在多個地方，而且代碼還看起來更清晰了。每個計算屬性都包括和，我們平時默認用到的是來讀取。計算屬性依賴的數據變化時，它才會重新取值，只要依賴數據不變化，它就不更新，可以緩存數據。適用場景設想一個場景，你需要得到一個復雜運算/邏輯的返回值，利用模板內的表達又過長且難以閱讀和維護，這時計算屬性就可以很好的解決你的問題。看下面的例子： ...

wuyangnju 2019-08-23 15:56 評論0 收藏0
vue.js入門教程之基礎語法

摘要：與綁定數據綁定一個常見需求是操作元素的列表和它的內聯樣式。兩者只能選其一對象語法我們可以傳給一個對象，以動態地切換。注意不支持語法。相比之下，簡單得多元素始終被編譯并保留，只是簡單地基于切換。這意味著將分別重復運行于每個循環中。 vue Class 與 Style 綁定數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是屬性，我們可以用 v-bind 處理...

pumpkin9 2019-08-20 19:06 評論0 收藏0