淺談Vue的響應(yīng)式原理
一、響應(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)式原理示意圖
1、在實例前聲明
var vm = new Vue({
data: {
name: "failte"
}
})
在實例前聲明的屬性會在實例時添加 getter()、setter() 方法，因此此時的name是響應(yī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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue遍歷對象中的數(shù)組取值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue router 源碼概覽的案例分析，本文通過實例代碼案例分析給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
resetFields 對整個表單進行重置,將所有字段值重置為空并移除校驗結(jié)果,下面這篇文章主要給大家介紹了關(guān)于vue中resetFields重置初始值不生效的原因的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了iview在vue-cli3如何按需加載的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了對vue中的input輸入框進行郵箱驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個新需求：列表輪播滾動,實現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實現(xiàn),于是我開始了嘗試,但是在這個過程中遇到了動態(tài)綁定style樣式不生效,所以本文介紹了Vue實現(xiàn)無限輪播效果時動態(tài)綁定style失效的解決方法2024-08-08
使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)
今天小編就為大家分享一篇使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要給大家介紹了關(guān)于vue添加自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)滑動超出指定距離回頂部功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細介紹了vue開發(fā)拖拽進度條滑動組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09