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

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

成都創(chuàng)新互聯(lián)是一家專注于做網站、成都網站建設與策劃設計,麻栗坡網站建設哪家好?成都創(chuàng)新互聯(lián)做網站,專注于網站建設10多年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:麻栗坡等地區(qū)。麻栗坡做網站價格咨詢:18980820575

配置參數(shù)

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

new Vue({
  options})

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

數(shù)據(jù)相關選項

選項	說明
data	聲明需要響應式綁定的數(shù)據(jù)對象
props	接收來自父組件的數(shù)據(jù)
propsData	創(chuàng)建實例時手動傳遞props，方便測試props
computed	用于聲明計算屬性
methods	用于定義Vue實例的方法
watch	偵聽屬性，監(jiān)控 Vue 實例上的數(shù)據(jù)變動，并調用其回調函數(shù)

DOM相關選項

選項	說明
el	聲明Vue根組件的掛載點（根組件特有）
template	用于掛載元素的字符串模板
render	渲染函數(shù)，用于創(chuàng)建虛擬DOM，是字符串模板的替代方案
renderError	僅用于開發(fā)環(huán)境，在render()出現(xiàn)錯誤時，提供另外的渲染輸出

生命周期鉤子相關選項

選項	說明
beforeCreate	發(fā)生在Vue實例初始化之后，data observer和event/watcher事件被配置之前
created	發(fā)生在Vue實例初始化以及data observer和event/watcher事件被配置之后
beforeMount	掛載開始之前被調用，此時render()首次被調用
mounted	el被新建的vm.$el替換，并掛載到實例上之后調用
beforeUpdate	數(shù)據(jù)更新時調用，發(fā)生在虛擬DOM重新渲染和打補丁之前
updated	數(shù)據(jù)更改導致虛擬DOM重新渲染和打補丁之后被調用
activated	keep-alive組件激活時調用
deactivated	keep-alive組件停用時調用
beforeDestroy	實例銷毀之前調用，Vue實例依然可用
destroyed	Vue實例銷毀后調用，事件監(jiān)聽和子實例全部被移除，釋放系統(tǒng)資源

資源相關選項

選項	說明
directives	配置局部注冊的自定義指令
filters	過濾器,針對一些數(shù)據(jù)進行篩選、過濾、格式化等相關的處理，過濾器是一個帶有參數(shù)和返回值的方法 ,只能用在{{}}和v-bind里面。
components	配置局部注冊組件

組合選項

選項	說明
parent	指定當前實例的父實例，子實例用this.$parent訪問父實例，父實例通過$children數(shù)組訪問子實例
mixins	將屬性混入Vue實例對象，并在Vue自身實例對象的屬性被調用之前得到執(zhí)行(組件的多繼承)
extends	用于聲明繼承另一個組件，從而無需使用Vue.extend，便于擴展單文件組件(組件的單繼承)
provide&inject	2個屬性需要一起使用，用來向所有子組件注入依賴

其它選項

選項	說明
name	允許組件遞歸調用自身，便于調試時顯示更加友好的警告信息
delimiters	改變模板字符串的風格，默認為{{}}
functional	讓組件無狀態(tài)(沒有data)和無實例(沒有this上下文)
model	允許自定義組件使用v-model時定制prop和event
inheritAttrs	默認情況下，父作用域的非props屬性綁定會應用在子組件的根元素上。當編寫嵌套有其它組件或元素的組件時，可以將該屬性設置為false關閉這些默認行為
comments	設為true時會保留并且渲染模板中的HTML注釋

了解MVC

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

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

View：視圖界面，用來展示UI界面和響應用戶交互

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

MVVM模式

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

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

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

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

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

雙向綁定步驟：

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

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

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

vue的雙向綁定原理：

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

以上就是關于“VUE實例參數(shù)與MVVM模式知識點有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標題：VUE實例參數(shù)與MVVM模式知識點有哪些
網站地址：http://bm7419.com/article38/jdccsp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站制作、網站收錄、定制網站、網站營銷、自適應網站、建站公司

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)