淺談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層進(jìn)行更新
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)式的，每當(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts定制特殊的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue簡易版無限加載組件實現(xiàn)原理與示例代碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了基于Vue+Webpack拆分路由文件實現(xiàn)管理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題
今天小編就為大家分享一篇解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了Vue中添加過渡效果的方法，Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應(yīng)用過渡效果，有興趣的同學(xué)可以了解一下。2017-03-03
本文為大家介紹Vue中路由的使用方法,包括安裝路由創(chuàng)建路由并導(dǎo)出以及在應(yīng)用實例中使用vue-router的相關(guān)知識,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
利用Vite搭建Vue3+ElementUI-Plus項目的全過程
vue3如今已經(jīng)成為默認(rèn)版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
解析使用useDark(),發(fā)現(xiàn)transition?動畫失效
這篇文章主要為大家介紹了使用useDark(),發(fā)現(xiàn)transition動畫失效的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章為大家詳細(xì)介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友們可以一起看看吧。2016-10-10
這篇文章主要介紹了vue中v-bind:style效果的自定義指令，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01