Vue中data和computed的區(qū)別

tain335 發(fā)布于2019-08-23 15:22 / 3583人閱讀

摘要：和都是響應(yīng)式的，先看看官方的說法實(shí)例的數(shù)據(jù)對(duì)象。將會(huì)遞歸將的屬性轉(zhuǎn)換為，從而讓的屬性能夠響應(yīng)數(shù)據(jù)變化。深入理解響應(yīng)式原理當(dāng)你把一個(gè)普通的對(duì)象傳給實(shí)例的選項(xiàng)，將遍歷此對(duì)象所有的屬性，并使用把這些屬性全部轉(zhuǎn)為。沒有這句，中的也不跟蹤狀態(tài)。

First
data 和 computed都是響應(yīng)式的，先看看官方的說法：

Data:

Vue 實(shí)例的數(shù)據(jù)對(duì)象。Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。
深入理解響應(yīng)式原理：
當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。
每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。
原理如下圖：

2.兩者的區(qū)別：

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

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

以上代碼轉(zhuǎn)載自代碼來源

GPU云服務(wù)器云服務(wù)器 vue中中SP與DP的區(qū)別寬帶和專線的區(qū)別專線和寬帶的區(qū)別

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101943.html

相關(guān)文章

Vue.js中 computed 和 methods 的區(qū)別

摘要：官方文檔中已經(jīng)有對(duì)其的解釋了，在這里把我的理解記錄一下。的使用場(chǎng)景模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。只在相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值。官方文檔中已經(jīng)有對(duì)其的解釋了，在這里把我的理解記錄一下。 computed 的使用場(chǎng)景 HTML模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。比如這...

Raaabbit 2019-08-23 14:46 評(píng)論0 收藏0
Vue.js中 computed 和 methods 的區(qū)別

摘要：官方文檔中已經(jīng)有對(duì)其的解釋了，在這里把我的理解記錄一下。的使用場(chǎng)景模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。只在相關(guān)依賴發(fā)生改變時(shí)它們才會(huì)重新求值。官方文檔中已經(jīng)有對(duì)其的解釋了，在這里把我的理解記錄一下。 computed 的使用場(chǎng)景 HTML模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。比如這...

TwIStOy 2019-08-02 14:06 評(píng)論0 收藏0
淺析Vue中computed與method的區(qū)別

摘要：其實(shí)官方文檔對(duì)這個(gè)已經(jīng)說的很清楚了，筆者不過是在其基礎(chǔ)上進(jìn)行歸納總結(jié)，各位看官還是先去讀一下官方文檔吧區(qū)別于的兩個(gè)核心在官方文檔中，強(qiáng)調(diào)了區(qū)別于最重要的兩點(diǎn)是屬性調(diào)用，而是函數(shù)調(diào)用帶有緩存功能，而不是，下面我們看一個(gè)具體的例子部分其實(shí)官方文檔對(duì)這個(gè)已經(jīng)說的很清楚了，筆者不過是在其基礎(chǔ)上進(jìn)行歸納總結(jié)，各位看官還是先去讀一下官方文檔吧 1.computed區(qū)別于method的兩個(gè)核心在...

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

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

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

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

lk20150415 2019-08-20 18:34 評(píng)論0 收藏0