Vue中data和computed的區別

tain335 發布于2019-08-23 15:22 / 3596人閱讀

摘要：和都是響應式的，先看看官方的說法實例的數據對象。將會遞歸將的屬性轉換為，從而讓的屬性能夠響應數據變化。深入理解響應式原理當你把一個普通的對象傳給實例的選項，將遍歷此對象所有的屬性，并使用把這些屬性全部轉為。沒有這句，中的也不跟蹤狀態。

First
data 和 computed都是響應式的，先看看官方的說法：

Data:

Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。
深入理解響應式原理：
當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。
每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。
原理如下圖：

2.兩者的區別：

data中的屬性并不會隨賦值變量的改動而改動，(賦值變量類似：num1: aaa.bbb這種，而這種是直接賦值：num1: "aaa")

當需要這種隨賦值變量的改動而改動的時候，還是用計算屬性computed合適
如果實在要在data里面聲明屬性，可以先賦一個值，然后在methods里面定義方法操作該屬性，效果等同，也會有響應式
測試以下代碼感受以下：

以上代碼轉載自代碼來源

GPU云服務器云服務器 vue中中SP與DP的區別寬帶和專線的區別專線和寬帶的區別

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

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

Vue.js中 computed 和 methods 的區別

摘要：官方文檔中已經有對其的解釋了，在這里把我的理解記錄一下。的使用場景模板中的復雜邏輯表達式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。只在相關依賴發生改變時它們才會重新求值。官方文檔中已經有對其的解釋了，在這里把我的理解記錄一下。 computed 的使用場景 HTML模板中的復雜邏輯表達式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。比如這...

Raaabbit 2019-08-23 14:46 評論0 收藏0
Vue.js中 computed 和 methods 的區別

摘要：官方文檔中已經有對其的解釋了，在這里把我的理解記錄一下。的使用場景模板中的復雜邏輯表達式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。只在相關依賴發生改變時它們才會重新求值。官方文檔中已經有對其的解釋了，在這里把我的理解記錄一下。 computed 的使用場景 HTML模板中的復雜邏輯表達式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。比如這...

TwIStOy 2019-08-02 14:06 評論0 收藏0
淺析Vue中computed與method的區別

摘要：其實官方文檔對這個已經說的很清楚了，筆者不過是在其基礎上進行歸納總結，各位看官還是先去讀一下官方文檔吧區別于的兩個核心在官方文檔中，強調了區別于最重要的兩點是屬性調用，而是函數調用帶有緩存功能，而不是，下面我們看一個具體的例子部分其實官方文檔對這個已經說的很清楚了，筆者不過是在其基礎上進行歸納總結，各位看官還是先去讀一下官方文檔吧 1.computed區別于method的兩個核心在...

RyanHoo 2019-08-22 16:29 評論0 收藏0
Vue的computed(計算屬性)使用實例之TodoList

摘要：最近倒騰了一會，有點迷惑其中與這兩個屬性的區別所以試著寫了這個，好土掩面逃類似中組件的方法，不同的是采用的與綁定事件。簡而言之，是一次性計算沒有緩存，是有緩存的計算。最近倒騰了一會vue，有點迷惑其中methods與computed這兩個屬性的區別,所以試著寫了TodoList這個demo，(好土掩面逃~）; 1. methods methods類似react中組件的方法，不同的是v...

waruqi 2019-08-01 17:22 評論0 收藏0
Vue的computed(計算屬性)使用實例之TodoList

摘要：最近倒騰了一會，有點迷惑其中與這兩個屬性的區別所以試著寫了這個，好土掩面逃類似中組件的方法，不同的是采用的與綁定事件。簡而言之，是一次性計算沒有緩存，是有緩存的計算。最近倒騰了一會vue，有點迷惑其中methods與computed這兩個屬性的區別,所以試著寫了TodoList這個demo，(好土掩面逃~）; 1. methods methods類似react中組件的方法，不同的是v...

lk20150415 2019-08-20 18:34 評論0 收藏0