Vue的響應式原理

Vue的響應式原理

1、響應式的底層實現

一、Vue與MVVM

Vue是一個 MVVM框架，其各層的對應關係以下

• View層：在Vue中是綁定dom對象的HTML

• ViewModel層：在Vue中是實例的vm對象

• Model層：在Vue中是data、computed、methods等中的數據

在 Model 層的數據變化時，View層會在ViewModel的做用下，實現自動更新

二、Vue的響應式原理

Vue響應式底層實現方法是 Object.defineProperty() 方法，該方法中存在一個getter和setter的可選項，能夠對屬性值的獲取和設置形成影響

Vue中編寫了一個wather來處理數據

在使用getter方法時，總會通知wather實例對view層渲染頁面

一樣的，在使用setter方法時，總會在變動值的同時，通知wather實例對view層進行更新

三、響應式原理與兼容

因爲 Object.defineProperty() 方法只部分支持IE9，因此Vue兼容IE版本最低爲IE9，在IE9中，Vue的核心框架、vue-router、vuex是確保能夠正常使用的

四、響應式原理示意圖

2、響應式數據

一、在實例前聲明

var vm = new Vue({
    data: {
        name: "failte"
    }
})
複製代碼

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

二、在實例後添加

vm.name = "failte"
複製代碼

因爲data中沒有該屬性，所以實例後，此時的name是非響應式的，name變化時，不會更新視圖

若須要轉換爲響應式數據，須要使用 Vue.set() 方法手動添加爲響應式屬性

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