VUE實(shí)例參數(shù)與MVVM模式知識點(diǎn)有哪些

這篇“VUE實(shí)例參數(shù)與MVVM模式知識點(diǎn)有哪些”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“VUE實(shí)例參數(shù)與MVVM模式知識點(diǎn)有哪些”文章吧。

配置參數(shù)

實(shí)例化一個Vue對象，參數(shù)是一個選項對象，下面將會對其中包含的選項做些簡單的說明。

new Vue({
  options})

在Vue實(shí)例中可以通過this.$options查看實(shí)例的配置項

數(shù)據(jù)相關(guān)選項

DOM相關(guān)選項

生命周期鉤子相關(guān)選項

資源相關(guān)選項

組合選項

其它選項

了解MVC

Model、View、Controller，分別表示數(shù)據(jù)、視圖、控制器。其實(shí)這只是一種設(shè)計思想，

Model：數(shù)據(jù)模型，用來存儲數(shù)據(jù)

View：視圖界面，用來展示UI界面和響應(yīng)用戶交互

Controller：控制器(大管家角色)，監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互

MVVM模式

M(model)：代表的是數(shù)據(jù)

V(view)：代表的是視圖(頁面)

VM(viewmodel)：代表的是視圖模型，作用：用來管理視圖和模型的轉(zhuǎn)換

MVVM是MVC的增強(qiáng)版，實(shí)質(zhì)上和MVC沒有本質(zhì)區(qū)別，只是代碼的位置變動而已

簡單來說就是視圖發(fā)生改變時模型也會發(fā)生改變，模型發(fā)生改變時視圖也會發(fā)生改變，這就是vue的數(shù)據(jù)雙向綁定
關(guān)鍵點(diǎn)在于 data 如何更新 view，因為 view 更新 data 其實(shí)可以通過事件監(jiān)聽即可，比如 input 標(biāo)簽監(jiān)聽 input 事件就可以實(shí)現(xiàn)了

雙向綁定步驟：

• 實(shí)現(xiàn)一個監(jiān)聽器 Observer，用來劫持并監(jiān)聽所有屬性，如果有變動的，就通知訂閱者。

• 實(shí)現(xiàn)一個訂閱者 Watcher，可以收到屬性的變化通知并執(zhí)行相應(yīng)的函數(shù)，從而更新視圖。

• 實(shí)現(xiàn)一個解析器 Compile，可以掃描和解析每個節(jié)點(diǎn)的相關(guān)指令，并根據(jù)初始化模板數(shù)據(jù)以及初始化相應(yīng)的訂閱器。

vue的雙向綁定原理：

vue數(shù)據(jù)的雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的。其核心就是通過Object.defineProperty()方法設(shè)置set和get函數(shù)來實(shí)現(xiàn)數(shù)據(jù)的劫持，在數(shù)據(jù)變化時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。也就是說數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變；

以上就是關(guān)于“VUE實(shí)例參數(shù)與MVVM模式知識點(diǎn)有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。