前言
本文通過(guò)console.log的一些特性,結(jié)合vue.js的源碼,通過(guò)一個(gè)簡(jiǎn)單的例子,讓你了解Vue的各個(gè)過(guò)程的變化.</br>
<strong>控制臺(tái)輸出的效果圖</strong>
請(qǐng)用chrome查看,并打開(kāi)控制臺(tái)看效果
演示地址
準(zhǔn)備
vue-console.html的創(chuàng)建
下載vue.js文件,在vue-console.html中引入,我寫(xiě)了一個(gè)簡(jiǎn)單的例子,涵蓋:初始化視圖->點(diǎn)擊后更新視圖(包括各個(gè)鉤子函數(shù))</br>
代碼如下:
<script src="./vue.js"></script>
<div id="app">
<div id="hi" @click="changeName">{{name}}</div>
</div>
</div>
<script>
var style = 'font-size: 20px;color: blue'
var vm = new Vue({
el:'#app',
data() {
return {
name: '點(diǎn)我',
}
},
beforeCreate () {
console.log('%cI am beforeCreate------ 我在選項(xiàng)里寫(xiě)的', style)
},
created () {
console.log('%cI am created------ 我在選項(xiàng)里寫(xiě)的', style)
},
beforeMount () {
console.log('%cI am beforeMount------ 我在選項(xiàng)里寫(xiě)的', style)
},
mounted () {
console.log('%cI am mounted------ 我在選項(xiàng)里寫(xiě)的', style)
},
beforeUpdate () {
console.log('%cI am beforeUpdate------ 我在選項(xiàng)里寫(xiě)的',style)
},
updated () {
console.log('%cI am updated------ 我在選項(xiàng)里寫(xiě)的', style)
},
methods: {
changeName () { // 點(diǎn)擊是文本發(fā)生變化
this.name = 'jike'
}
}
})
</script>
console.log樣式的配置
var tagLeftStyle = [
'color: #fff',
'border-top-left-radius:3px',
'border-bottom-left-radius:3px',
'background-color: #564b4f',
'padding: 5px'
].join(';')
var tagRightStyle = function (color) {
color = color?color:'#0BCF1B'
return [
'color: #fff',
'border-top-right-radius:3px',
'border-bottom-right-radius:3px',
`background-color: ${color}`,
'padding: 5px'
].join(';')
}
// ...
// 一些樣式省略,具體可以去看源碼
var tagVariable = function (obj, tag, desc, num, detail, color) {
console.log(`%c${lineNo} %o%c<---%c${tag}%c${desc} %c源碼${num}行 %c說(shuō)明: %o`, noStyle, obj, arrowStyle ,tagLeftStyle, tagRightStyle(color), sourceNoStyle, detailStyle, detail)
lineNo++
}
// %c代表后面的文本,使用css樣式,%o代表對(duì)象輸出
上面的代碼只要調(diào)用
tagVariable(...)傳遞參數(shù),就實(shí)現(xiàn)上圖?的標(biāo)簽效果,還可以
console.log顯示圖片,加了一下講解圖方便理解;
通過(guò)調(diào)用上面封裝的函數(shù)在
vue.js某些時(shí)刻調(diào)用,就達(dá)到很好的效果
項(xiàng)目過(guò)程
我將整個(gè)過(guò)程分為四個(gè)階段: 構(gòu)造函數(shù)階段肠牲、初始化階段拍嵌、掛載階段 、更新階段,
會(huì)以上面提到的例子貫穿的
構(gòu)造函數(shù)階段
平常我們使用Vue,都是用new Vue({}),其實(shí)就是調(diào)用它的構(gòu)造函數(shù)創(chuàng)建實(shí)例,如下圖
初始化階段
會(huì)對(duì)我們傳入data摘符、methods等處理,便于后面階段的調(diào)用及一些功能的實(shí)現(xiàn)
如例子的data的name會(huì)被代理到vm實(shí)例上,所以我們可以用this.name調(diào)用
data() {
return {
name: '點(diǎn)我',
}
}
掛載階段
<div id="app">
<div id="hi" @click="changeName">{{name}}</div>
</div>
會(huì)將上面的html渲染成視圖(這里面包括渲染函數(shù),虛擬dom的實(shí)現(xiàn)等)
更新階段
點(diǎn)擊頁(yè)面上的文本時(shí)發(fā)生更新,這個(gè)過(guò)程包括:wathcer的觸發(fā)、patch算法對(duì)比新舊vnode,更新dom
說(shuō)明
具體的可以去看源碼,在github上,覺(jué)得可以的話幫忙star一下
參考文章: Vue技術(shù)內(nèi)幕
Vue.js 源碼解析
