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