這篇文章帶給大家的內容是關於vue實現的三個步驟講解（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
Vue是當今熱門的框架，他可以進行資料雙向綁定，為什麼vue會大受歡迎，我知道的原因大致如下？
1.傳統改變dom結構的操作是非常浪費效能的操作（就是慢）
2.把dom結構改變的邏輯放在js層來做可以提升效能。
3.資料和視圖的分離更符合物件導向的編程，mvvm
vue的實作也是和react一樣用虛擬dom來實現的，至於什麼是虛擬dom，就是用js透過模板渲染而成的dom。
vue實現的步驟大概是這三個步驟：1、響應式：vue怎麼監聽到dota的每個屬性值的變化？
2、模板引擎：vue的模板如何解析的，指令是如何處理的？
3、模板渲染：如何把data裡的資料加入模板渲染成html？
第一步:響應式
響應式的實作主要是依賴一個物件的方法:
Object.defineProperty
這個方法能夠監聽物件中屬性的變化而進行邏輯處理
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中模擬實現，大概是這樣的：
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) //闭包处理
}其實學過java的同學肯定對這個不陌生，java的類別裡面可以直接生成get和set方法
模板必須轉換成js程式碼，因為:
1.邏輯判斷(v-if,v-for),必須要轉換成js程式碼，因為:
1.邏輯判斷(v-if,v-for),必須要用js才能實現.
<div id="app">
<p>{{price}}</p>
</div> with(this) { //this就是vm
return _c(
'p',
{
attrs:{'id':'app'}
},
[
// _c是createElement
// _v是createTextVNode
// _s是toString方法
_c('p',[_v(_s(price))])
]
)
} <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>#
with (this) {
return _c(
'p',
{ attrs: { "id": "app" } },
[
_c(
'p',
[
_c(
'input',
{
//指令
directives: [
{
name: "model",
rawName: "v-model",
value: (title), //vm.title
expression: "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(
'p',
[
_c(
'ul',
_l(
(list), function (item) {
return _c(
'li',
[
_v(_s(item))
]
)
}
)
)
]
)
]
)
}vm._update(Vnode) {
const prevVonde=vm._Vnode
vm._Vnode=Vnode;
if(!prevVnode) { //如果没有之前的vnode，第一次渲染
vm.$el=vm._patch_(vm.$el,Vnode)
}else {
vm.$el=vm._patch_(prevVnode,Vnode)
}
}
function updataComponent() {
//vm._reander就是解析模板的rende函数，返回了一个vnode
vm._update(vm._render())
}以上是vue實現的三個步驟講解（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
