Vue是當(dāng)今熱門的框架，他可以進行數(shù)據(jù)雙向綁定，為什么vue會大受歡迎，我知道的原因大致如下？
1.傳統(tǒng)改變dom結(jié)構(gòu)的操作是非常浪費性能的操作（就是慢）
2.把dom結(jié)構(gòu)改變的邏輯放在js層來做可以提高性能。
3.數(shù)據(jù)和視圖的分離更符合面向?qū)ο蟮木幊?#xff0c;mvvm

vue的實現(xiàn)也是和react一樣用虛擬dom來實現(xiàn)的，至于什么是虛擬dom，就是用js通過模板渲染而成的dom。

vue實現(xiàn)的步驟大概是這三步：

1、響應(yīng)式：vue怎么監(jiān)聽到dota的每個屬性值的變化？
2、模板引擎：vue的模板如何解析的，指令是如何處理的？
3、模板渲染：如何把data里的數(shù)據(jù)加入模板并渲染成html？

第一步:響應(yīng)式

響應(yīng)式的實現(xiàn)主要是依靠一個對象的方法:
Object.defineProperty
這個方法能夠監(jiān)聽對象中屬性的變化而進行邏輯處理
dome如下：

var obj={}var _name ='zhangsan'Object.defineProperty(obj,'name',{get:function() {console.log('get')return _name},set: function(newVal) {console.log('set')_name=newVal}})

這里你改變name的值或者訪問name的值就會有打印信息

而在vue中模擬實現(xiàn)，大概是這樣的：

var vm ={}var data={name:'張三',age:20}var key,value;for(key in data) {(function(key){Object.defineProperty(vm,key,{ //綁定到vm上get:function(){console.log('get')return data[key];},set:function(newVal){console.log('set');data[key]=newVal}})})(key) //閉包處理}

其實學(xué)過java的同學(xué)肯定對這個不陌生，java的類里面可以直接生成get和set方法

第二步：解析模板

模板必須要轉(zhuǎn)化成js代碼，因為:
1.邏輯判斷(v-if,v-for),必須要用js才能實現(xiàn).
2.虛擬dom的渲染，必須要使用js才能實現(xiàn)。(render函數(shù))

• 模板1

<div id="app"><p>{{price}}</p></div>

• 模板1轉(zhuǎn)化的render

with(this) { //this就是vmreturn _c('div',{attrs:{'id':'app'}},[// _c是createElement// _v是createTextVNode// _s是toString方法_c('p',[_v(_s(price))])])}

• 模板2

<div id="app"><div><input v-model="title"><button v-on:click="add">submit</button></div><div><ul><li v-for="item in list">{{item}}</li></ul></div></div>

• 模板2轉(zhuǎn)化的render

with (this) {return _c('div',{ attrs: { "id": "app" } },[_c('div',[_c('input',{//指令directives: [{name: "model",rawName: "v-model",value: (title), //vm.titleexpression: "title"}],domProps: {"value": (title) //vm.title },on: {"input": function ($event) {if ($event.target.composing) return;title = $event.target.value}}}),_v(" "),_c('button',{on: { "click": add } //vm.add},[_v("submit")])]),_v(" "),_c('div',[_c('ul',_l((list), function (item) {return _c('li',[_v(_s(item))])}))])])}

這就是用于渲染的render函數(shù)

第三步：把模板加上數(shù)據(jù)渲染成html

vm._update(Vnode) {const prevVonde=vm._Vnodevm._Vnode=Vnode;if(!prevVnode) { //如果沒有之前的vnode，第一次渲染vm.$el=vm._patch_(vm.$el,Vnode)}else {vm.$el=vm._patch_(prevVnode,Vnode)} } function updataComponent() {//vm._reander就是解析模板的rende函數(shù)，返回了一個vnodevm._update(vm._render()) }

這里的vm_.patch_里面就是復(fù)雜的diff算法了。根據(jù)dom的差別來渲染，里面使用來很多的遞歸調(diào)用，而且里面最要涉及到很多效率問題，天下武功為快不破嘛。

總結(jié)

以上是生活随笔為你收集整理的vue实现原理初探的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。