vue在使用上入門并沒(méi)有什么太高的門檻杰标，但前端同學(xué)們也不該僅僅停留在使用上绳慎。以 vue 設(shè)計(jì)纵竖、編碼之優(yōu)秀，足當(dāng)抽絲剝繭杏愤，扒開(kāi)它的外殼靡砌，深入其原理。讓我們一起來(lái)刺破 vue 的心臟
vue核心執(zhí)行過(guò)程圖
vue核心的執(zhí)行過(guò)程主要分為這幾個(gè)階段：
1） 編譯模板珊楼，生成可復(fù)用的render function code(這是今天要重點(diǎn)解讀的)通殃，這一步在vue實(shí)例的整個(gè)生命周期中只會(huì)執(zhí)行一次甚至零次，因?yàn)槲覀兛梢栽诖虬臅r(shí)候可以預(yù)編譯
2） 生成watcher等核心渲染監(jiān)聽(tīng)厕宗，在整個(gè)vue實(shí)例的生命過(guò)程中持續(xù)發(fā)生著作用画舌，對(duì)view和modal進(jìn)行雙向綁定
3） 虛擬dom的diff比較，當(dāng)watcher監(jiān)聽(tīng)到data的變更的時(shí)候已慢，就會(huì)根據(jù)注入新的data執(zhí)行render function code曲聂，生成新的虛擬dom，跟老的虛擬dom（第一次執(zhí)行的時(shí)候可能為空）進(jìn)行diff比對(duì)佑惠，不同的部分將寫入真實(shí)的dom
這幾個(gè)過(guò)程都會(huì)以源碼解析的方式分篇解讀朋腋，今天我們重點(diǎn)講解的是第一部分模板編譯中輸出的render function code
render function code解析
一齐疙、模板編譯過(guò)程分解
// 生成ast語(yǔ)法樹(shù)
const ast = parse(template.trim(), options)
// 標(biāo)記靜態(tài)內(nèi)容（以免diff的時(shí)候需要重復(fù)比較）
optimize(ast, options)
// 生成render function code
const code = generate(ast, options)
很遺憾，上訴三步的代碼今天都只是點(diǎn)到為止旭咽，不需要太努力贞奋，就能在網(wǎng)上搜到相關(guān)解析的文章，如果實(shí)在找不到同時(shí)又感興趣轻专，可以找到vue源碼中的下面文件去讀：
// 編譯入口
src/compiller/index.js
// html解析
src/compiller/parser/html-parser.js
// src/compiller下的其它文件
換一個(gè)姿勢(shì)讀源碼忆矛，今天我們要讀的是generate(ast, options)生成的render function code的具體代碼
二、寫一個(gè) vue demo
之前有提到過(guò)请垛，讀源碼需要先了解整體的設(shè)計(jì)思想催训、架構(gòu)，上面那個(gè)執(zhí)行過(guò)程圖在此列宗收；另外漫拭，搭建一個(gè)demo執(zhí)行環(huán)境進(jìn)行debug單步調(diào)試，也是一個(gè)重要手段（特別是你對(duì)源碼的目錄結(jié)構(gòu)不是特別清晰的時(shí)候）混稽。為了讓生成的render function code更為完整采驻，寫一個(gè)覆蓋面盡量廣的 demo :
//template
<div id="app">
<p>普通屬性：{{ message }}</p>
<p>{{msg()}}</p>
<p>{{ct}}</p>
<input v-model="message">
<div v-for="item in items">
{{ item.text }}
</div>
<button v-on:click="bindClick">點(diǎn)我抓同偉</button>
</div>
// js
new Vue({
el: '#app',
data: {
message: '以vue的名義',
items: [{
text: '達(dá)康書記'
}, {
text: '育良書記'
}]
},
methods: {
bindClick: function() {
this.message = '這就抓同偉去';
},
msg: function() {
return this.message + "這個(gè)方法每次都會(huì)執(zhí)行";
}
},
computed: {
ct: function() {
return this.message + "計(jì)算屬性并不會(huì)每次都執(zhí)行";
}
}
})
render function code 解析
debug 拿到生成的 render function code（當(dāng)然也可以通過(guò) webpack 的 vue-loader 編譯之后的 dist 文件拿到，此處省略1000字）
with(this) {
return _c('div', {
attrs: {
"id": "app"
}
},
[_c('p', [_v("普通屬性：" + _s(message))]), _v(" "), _c('p', [_v(_s(msg()))]), _v(" "), _c('p', [_v(_s(ct))]), _v(" "), _c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: (message),
expression: "message"
}],
domProps: {
"value": (message)
},
on: {
"input": function($event) {
if ($event.target.composing) return;
message = $event.target.value
}
}
}), _v(" "), _l((items),
function(item) {
return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
}), _v(" "), _c('button', {
on: {
"click": bindClick
}
},
[_v("點(diǎn)我出奇跡抓同偉")])], 2)
}
甭看這段代碼有點(diǎn)怪匈勋，但是如果告訴你礼旅，這段代碼，注入 data 執(zhí)行洽洁，生成的就是傳得玄乎其玄的虛擬 dom 樹(shù)痘系，然后再來(lái)一本正經(jīng)的解（cai）讀(ce)一下，你又會(huì)覺(jué)得這段代碼其實(shí)沒(méi)有這么晦澀難懂饿自。ok汰翠，結(jié)合 demo
來(lái)看看，模板相關(guān)指令都被解析成什么了：
1）{{messge}} 解析成了 _s(message)昭雌，果斷認(rèn)為這個(gè) _s 就是 toString
2）{{msg()}} method 解析成了 _s(msg())复唤，可見(jiàn)每一次 render, msg 方法都會(huì)被執(zhí)行一遍（即使最終沒(méi)有被反應(yīng)到真實(shí) dom 上），這就是計(jì)算屬性存在的意義
3）{{ct}} 計(jì)算屬性依然被解析成了 _s(ct)烛卧，雖然計(jì)算屬性可以稱之為屬性佛纫，但是形式上畢竟還是方法，是不是覺(jué)得比較奇怪唱星？其實(shí) watcher 除了監(jiān)聽(tīng)組件雳旅，還會(huì)監(jiān)聽(tīng)計(jì)算屬性依賴的屬性，一旦屬性發(fā)生變更间聊，就會(huì)執(zhí)行計(jì)算屬性方法，并將執(zhí)行結(jié)果賦值給實(shí)例作用域下與計(jì)算屬性方法名相同的屬性抵拘，這就是直接使用 _s(ct) 而不是 _s(ct()) 就能正確引用計(jì)算屬性值的原因哎榴，計(jì)算屬性快就快在了這里
4）v-for="item in items" 被解析成了
_l((items),
function(item) {
return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
})
可見(jiàn) _l 跟 for-each 很類似
- 至于 v-on:click 則解析成了
_c('button', {
on: {
"click": bindClick
}
}
- 再來(lái)看看 _c, c->create->createNode, 假設(shè)這個(gè)方法就是創(chuàng)建虛擬節(jié)點(diǎn)，回頭看上述代碼，是不是挺有道理尚蝌，_c 創(chuàng)建根節(jié)點(diǎn)迎变，傳入的子節(jié)點(diǎn)同樣需要這個(gè)方法創(chuàng)建。找找源碼驗(yàn)證下
src/core/vdom/vnode.js飘言，以下中文注釋是我加的
constructor (
tag?: string, //標(biāo)簽名
data?: VNodeData, //屬性數(shù)據(jù)衣形，事件監(jiān)聽(tīng)等
children?: ?Array<VNode>, //子節(jié)點(diǎn)
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions
) {
...
}
至此，也算是自圓其說(shuō)了
