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