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

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、成都小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了濱城免費(fèi)建站歡迎大家使用！

1、Vue與MVVM

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

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

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

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

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

Vue中編寫(xiě)了一個(gè)wather來(lái)處理數(shù)據(jù)

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

由于 Object.defineProperty() 方法只部分支持IE9，所以Vue兼容IE版本最低為IE9，在IE9中，Vue的核心框架、vue-router、vuex是確保可以正常使用的

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

1、在實(shí)例前聲明

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

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

2、在實(shí)例后添加

vm.name = "failte"

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。