六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

vue框架漸進(jìn)性的理解和mvvm模式的理解

2020-3-1    前端達(dá)人

引言

現(xiàn)在市場很多前端開發(fā)的招聘崗位都或多或少的要求你要掌握vue,可以說vue在國內(nèi)是非常的火爆的,下面我給大家介紹一下vue框架吧!

vue是漸進(jìn)式框架


201806191038393.png


vue的核心是一個視圖模板引擎,但是這并不能說明vue不是一個框架,如上圖所示在聲明式渲染(視圖模板)基礎(chǔ)上,vue可以添加組件系統(tǒng)component,vue-router客戶端路由,vuex的狀態(tài)管理,vue-cli構(gòu)建工具來構(gòu)建一個完整的框架,更重要的是這些功能相互獨(dú)立,你可以任意選用你項(xiàng)目需要的部件,不一定非要全部整合在一起(就像是vuex它是一個很好的可以管理組件之間共享狀態(tài)的部件,但非必須在你的每一個項(xiàng)目中使用它,如果說你的項(xiàng)目相對簡單,組件之間的通信相對簡單你完全可以不使用它),可以看到漸進(jìn)式,其實(shí)就是vue的使用方式,同時也能看到vue的設(shè)計理念
vue是mvvm模式
為什么說vue是mvvm模式呢?這個大家首先要知道m(xù)vvm是什么。mvvm是Model-View-ViewModel的簡寫,即模型視圖視圖模型。模型是指后端傳過來的數(shù)據(jù),視圖是指我們看到的頁面,視圖模型是mvvm框架的核心,他是連接view和model的橋梁,它有兩個方向,第一將后端傳來的數(shù)據(jù)轉(zhuǎn)換成頁面可以看到的視圖,第二,將用戶在頁面上的交互轉(zhuǎn)化成為后端數(shù)據(jù),我們稱之為雙向綁定。
總結(jié)mvvm模式的視圖和模型是不能直接通信的,它們通過ViewModel來通信,ViewModel通常要實(shí)現(xiàn)一個observer觀察者,當(dāng)數(shù)據(jù)發(fā)生變化,ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化,然后通知到對應(yīng)的視圖做自動更新,而當(dāng)用戶操作視圖,ViewModel也能監(jiān)聽到視圖的變化,然后通知數(shù)據(jù)做改動,這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel,它可以實(shí)現(xiàn)dom監(jiān)聽和數(shù)據(jù)綁定
vue的數(shù)據(jù)綁定原理

20200229115524399.png

當(dāng)你把JavaScript對象傳入vue實(shí)例作為data選項(xiàng),vue會遍歷此對象的所以屬性,并使用Object.defineProperty把這些屬性轉(zhuǎn)換為getter和setter,每一個組件都有一個watcher實(shí)例,它會在組件渲染過程中,把接觸過的數(shù)據(jù)記錄為依賴,當(dāng)依賴的setter被觸發(fā)是,他會通知watcher,重而使關(guān)聯(lián)的數(shù)據(jù)重新渲染,以下是代碼展示。

<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
    get () {
        // obj設(shè)置了一個myname屬性,當(dāng)訪問obj.myname屬性會執(zhí)行g(shù)et方法
    },
    set (data) {
        // 當(dāng)修改myname屬性會執(zhí)行set方法
        // data會得到你修改的值
        obox.innerHTML = data
    }
})
object.definePeoperty有一下缺點(diǎn): {
1:無法監(jiān)聽es6的set,map變化
2:無法監(jiān)聽class類型的數(shù)據(jù)
3:屬性的新增和刪除也無法監(jiān)聽
4:數(shù)組元素的新整和刪除也無法監(jiān)聽
}



分享本文至:

日歷

鏈接

個人資料

存檔