快捷導(dǎo)航

vue2.0/3.0的響應(yīng)式原理及區(qū)別淺析

更新時(shí)間：2021年05月11日 09:57:59 作者：郝峰Vip

這篇文章主要給大家介紹了關(guān)于vue2.0/3.0響應(yīng)式原理及區(qū)別的相關(guān)資料，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

自從vue3.0正式上線以來(lái)，好多小伙伴都轉(zhuǎn)戰(zhàn)vue3.0了，這里把我自己總結(jié)的3.0和2.0的原理以及他倆的區(qū)別寫(xiě)出來(lái)，方便自己學(xué)習(xí)。

step 一，vue2.0的響應(yīng)式原理

先看看官網(wǎng)的解釋：

當(dāng)你把一個(gè)普通的 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個(gè)無(wú)法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。

這些 getter/setter 對(duì)用戶來(lái)說(shuō)是不可見(jiàn)的，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。這里需要注意的問(wèn)題是瀏覽器控制臺(tái)在打印數(shù)據(jù)對(duì)象時(shí) getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來(lái)獲取更加友好的檢查接口。

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

這里說(shuō)一下自己的理解

其實(shí)看過(guò)api,源碼的人就不難知道，v-model,響應(yīng)式原理共分為兩層

第一層，底層，就是es5的一個(gè)特性O(shè)bject.defineProperty通過(guò)getter,setter更新數(shù)據(jù)，
第二層，表現(xiàn)層，看過(guò)v-model原理的人都知道，v-model里邊有一個(gè)watcher,v-onwatcher監(jiān)聽(tīng)到數(shù)據(jù)變化，v-on更新到視圖中。