Vue入門實戰教程（四）模型層資料

此學習教程是對官方教程的解析，

vue例項—— vue.js，計算屬性和偵聽器——vue.js

當乙個 vue 例項被建立時，它將data物件中的所有的屬性加入到 vue 的響應式系統中。當這些屬性的值發生改變時，檢視將會產生「響應」，即匹配更新為新的值。

當這些資料改變時，檢視會進行重渲染。值得注意的是只有當例項被建立時就已經存在於data中的屬性才是響應式的。

理解：根據官方教程，響應式屬性可以定義如下：

響應式屬性：vue例項裡面的data物件中的屬性(當例項被建立時就已經存在) 的值發生改變時，檢視將會產生「響應」，即匹配更新為新的值。

根據上面的定義，響應式屬性必須是vue例項裡面的data物件中的屬性。但是真的是這樣嗎？我們看下如下例子：

這個頁面訪問後，可以發現對comp.msg2更改，檢視也會響應，說明外部傳入屬性propsdata也是響應式屬性。而這個區域性註冊的comp元件是vue的子類，本質上也是vue例項。

所以我們可以重新定義下：

響應式屬性：vue例項裡面的data/propsdata物件中的屬性(當例項被建立時就已經存在) 的值發生改變時，檢視將會產生「響應」，即匹配更新為新的值。

(1) 必須是vue例項裡面的data/propsdata物件中的屬性

(2) 前提是當例項被建立時就已經存在

(3)「響應"，指的是data的屬性一但改變了，就會發出通知給響應式系統，系統再反饋給檢視，檢視得到通知反映這種改變。所以，響應主要是指不需要人為干預的、自動化地處理了這種改變，一般是反映速度很快、即時的，但並不是立即、不需要時間的。

1.2.1 當例項被建立時就不存在，而在例項建立後賦值的屬性

當例項被建立時就已經存在是響應式屬性的前提，所以如果這個前提條件不符合，當然就不是響應式屬性了。

直接看簡單的例子：

b_value: }

執行結果：

可以看到，例項化後賦值的b屬性對模板沒有任何效果。

1.2.2 使用object.freeze()來包裝的data物件的屬性

使用object.freeze()會阻止修改現有的 property，也意味著響應系統無法再追蹤變化。

執行結果：

看一下官方教程的例子：

original message: }
computed reversed message: "}"

官方教程：

這裡我們宣告了乙個計算屬性reversedmessage。我們提供的函式將用作 propertyvm.reversedmessage的 getter 函式。

你可以開啟瀏覽器的控制台，自行修改例子中的 vm。vm.reversedmessage的值始終取決於vm.message的值。

你可以像繫結普通 property 一樣在模板中繫結計算屬性。vue 知道vm.reversedmessage依賴於vm.message，因此當vm.message發生改變時，所有依賴vm.reversedmessage的繫結也會更新。而且最妙的是我們已經以宣告的方式建立了這種依賴關係：計算屬性的 getter 函式是沒有*** (side effect) 的，這使它更易於測試和理解。

我們可以將同一函式定義為乙個方法而不是乙個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要message還沒有發生改變，多次訪問reversedmessage計算屬性會立即返回之前的計算結果，而不必再次執行函式。

理解：計算屬性：依賴響應式屬性，並對響應式屬性進行計算並對計算結果進行快取（除非依賴的響應式屬性變化才重新計算）的宣告式繫結模板的屬性

(1) 宣告式繫結模板：計算屬性與響應式屬性一樣，都是vue應用的屬性，可與模板進行宣告式繫結

(2) 依賴響應式屬性, 對響應式屬性進行計算：計算屬性不能對自身直接賦值，它的值是響應式屬性的計算值

(4) 對計算結果進行快取：響應式屬性的值隨依賴的響應式屬性變化而變化，所以依賴的響應式屬性不變的話，它也不變，所以沒必要重新計算了，只要響應式屬性不變，就把計算值快取起來。所以計算屬性可以放一些複雜的計算而不對效能造成很大影響。

計算屬性預設是乙個getter函式，所以上面的例子等同於：

original message: }
computed reversed message: "}"

計算屬性也可以用方法/過濾器來實現，它們的區別在於計算屬性有快取而方法/過濾器沒有快取。

看下面的例子來看下同樣效果的不同實現方式：

original message: }
reversed message: "}"
reversed message: "}"
reversed message: "}"

另乙個實現同樣的效果使用偵聽器的例子：

original message: }
reversed message: "}"

可以看到偵聽器不建立新的屬性，它只是對現有響應式屬性進行偵聽，如響應式屬性發生變化，再實現相應的邏輯。

那什麼時候用偵聽器而不使用計算屬性？當需要在資料變化時執行非同步或開銷較大的操作時。這個可以參考官網的例子，就不贅述了。

本章節教程結束。

下一章：vue入門實戰教程（五）—— 控制層：方法及過濾器

Vue入門實戰教程（四）模型層資料

vue2 0入門及實戰開發四

vue入門實戰教程用vue高仿餓了嗎APP

大資料入門與實戰 SQL基礎教程

Vue入門實戰教程（四） 模型層 資料

vue2 0入門及實戰開發 四

vue入門實戰教程 用vue高仿餓了嗎APP

大資料入門與實戰 SQL基礎教程

相關推薦

Vue入門實戰教程（四）模型層資料

vue2 0入門及實戰開發四

vue入門實戰教程用vue高仿餓了嗎APP