溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

淺談Vue的響應(yīng)式原理

發(fā)布時間：2020-10-26 02:45:02 來源：腳本之家 閱讀：142 作者：fn-failte 欄目：web開發(fā)

一、響應(yīng)式的底層實現(xiàn)

1、Vue與MVVM

Vue是一個 MVVM框架，其各層的對應(yīng)關(guān)系如下

  • View層：在Vue中是綁定dom對象的HTML
  • ViewModel層：在Vue中是實例的vm對象
  • Model層：在Vue中是data、computed、methods等中的數(shù)據(jù)

在 Model 層的數(shù)據(jù)變化時，View層會在ViewModel的作用下，實現(xiàn)自動更新

2、Vue的響應(yīng)式原理

Vue響應(yīng)式底層實現(xiàn)方法是 Object.defineProperty() 方法，該方法中存在一個getter和setter的可選項，可以對屬性值的獲取和設(shè)置造成影響

Vue中編寫了一個wather來處理數(shù)據(jù)

在使用getter方法時，總會通知wather實例對view層渲染頁面
同樣的，在使用setter方法時，總會在變更值的同時，通知wather實例對view層進行更新
3、響應(yīng)式原理與兼容

由于 Object.defineProperty() 方法只部分支持IE9，所以Vue兼容IE版本最低為IE9，在IE9中，Vue的核心框架、vue-router、vuex是確?？梢哉Ｊ褂玫?/p>

4、響應(yīng)式原理示意圖

淺談Vue的響應(yīng)式原理

1、在實例前聲明

var vm = new Vue({
data: {
name: "failte"
}
})

在實例前聲明的屬性會在實例時添加 getter()、setter() 方法，因此此時的name是響應(yīng)式的，每當(dāng)name變化時，會自動更新視圖

2、在實例后添加

vm.name = "failte"

由于data中沒有該屬性，因此實例后，此時的name是非響應(yīng)式的，name變化時，不會更新視圖
若需要轉(zhuǎn)換為響應(yīng)式數(shù)據(jù)，需要使用 Vue.set() 方法手動添加為響應(yīng)式屬性

Vue.set(vm.data, "name", "ajaccio")
//Vue.$set是該方法的別名

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手