国色天香成人一区二区,成人区人妻精品一区二区,精品免费看国产一区二区

<li id="g3zqm"></li>

少妇高潮激情一区二区三,免费av深夜在线观看,亚洲狼人久久伊人久久伊,久久精品人人做人人爽电影蜜月,黄色特级片一区二区三区,欧美日韩在线亚洲二区综二,极品少妇无套内射视频,日本极品少妇videossexhd

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

2020-2-25 seo達(dá)人

引言

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

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

vue的核心是一個(gè)視圖模板引擎，但是這并不能說(shuō)明vue不是一個(gè)框架，如上圖所示在聲明式渲染（視圖模板）基礎(chǔ)上，vue可以添加組件系統(tǒng)component，vue-router客戶端路由，vuex的狀態(tài)管理，vue-cli構(gòu)建工具來(lái)構(gòu)建一個(gè)完整的框架，更重要的是這些功能相互獨(dú)立，你可以任意選用你項(xiàng)目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個(gè)很好的可以管理組件之間共享狀態(tài)的部件，但非必須在你的每一個(gè)項(xiàng)目中使用它，如果說(shuō)你的項(xiàng)目相對(duì)簡(jiǎn)單，組件之間的通信相對(duì)簡(jiǎn)單你完全可以不使用它），可以看到漸進(jìn)式，其實(shí)就是vue的使用方式，同時(shí)也能看到vue的設(shè)計(jì)理念

vue是mvvm模式

為什么說(shuō)vue是mvvm模式呢？這個(gè)大家首先要知道m(xù)vvm是什么。mvvm是Model-View-ViewModel的簡(jiǎn)寫(xiě)，即模型視圖視圖模型。模型是指后端傳過(guò)來(lái)的數(shù)據(jù)，視圖是指我們看到的頁(yè)面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個(gè)方向，第一將后端傳來(lái)的數(shù)據(jù)轉(zhuǎn)換成頁(yè)面可以看到的視圖，第二，將用戶在頁(yè)面上的交互轉(zhuǎn)化成為后端數(shù)據(jù)，我們稱之為雙向綁定。

總結(jié)mvvm模式的視圖和模型是不能直接通信的，它們通過(guò)ViewModel來(lái)通信，ViewModel通常要實(shí)現(xiàn)一個(gè)observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽(tīng)到數(shù)據(jù)的這種變化，然后通知到對(duì)應(yīng)的視圖做自動(dòng)更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽(tīng)到視圖的變化，然后通知數(shù)據(jù)做改動(dòng)，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信

vue框架可以理解為是ViewModel，它可以實(shí)現(xiàn)dom監(jiān)聽(tīng)和數(shù)據(jù)綁定

vue的數(shù)據(jù)綁定原理

當(dāng)你把JavaScript對(duì)象傳入vue實(shí)例作為data選項(xiàng)，vue會(huì)遍歷此對(duì)象的所以屬性，并使用Object.defineProperty把這些屬性轉(zhuǎn)換為getter和setter，每一個(gè)組件都有一個(gè)watcher實(shí)例，它會(huì)在組件渲染過(guò)程中，把接觸過(guò)的數(shù)據(jù)記錄為依賴，當(dāng)依賴的setter被觸發(fā)是，他會(huì)通知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è)置了一個(gè)myname屬性，當(dāng)訪問(wèn)obj.myname屬性會(huì)執(zhí)行g(shù)et方法

},

set (data) {

// 當(dāng)修改myname屬性會(huì)執(zhí)行set方法

// data會(huì)得到你修改的值

obox.innerHTML = data

}

})

object.definePeoperty有一下缺點(diǎn)： {

1：無(wú)法監(jiān)聽(tīng)es6的set，map變化

2：無(wú)法監(jiān)聽(tīng)class類型的數(shù)據(jù)

3：屬性的新增和刪除也無(wú)法監(jiān)聽(tīng)

4：數(shù)組元素的新整和刪除也無(wú)法監(jiān)聽(tīng)

}