用console.log分析Vue源碼
阿新 • • 發佈:2018-12-21
源碼解析 urn tails swe new 技術 date 構造函數 arrow
調用
前言
本文通過console.log
的一些特性,結合vue.js
的源碼,通過一個簡單的例子,讓你了解Vue
的各個過程的變化.
控制臺輸出的效果圖
請用chrome查看,並打開控制臺看效果
演示地址
準備
vue-console.html
的創建
下載vue.js
文件,在vue-console.html
中引入,我寫了一個簡單的例子,涵蓋:初始化視圖->點擊後更新視圖(包括各個鉤子函數)
代碼如下:
<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: ‘點我‘, } }, beforeCreate () { console.log(‘%cI am beforeCreate------ 我在選項裏寫的‘, style) }, created () { console.log(‘%cI am created------ 我在選項裏寫的‘, style) }, beforeMount () { console.log(‘%cI am beforeMount------ 我在選項裏寫的‘, style) }, mounted () { console.log(‘%cI am mounted------ 我在選項裏寫的‘, style) }, beforeUpdate () { console.log(‘%cI am beforeUpdate------ 我在選項裏寫的‘,style) }, updated () { console.log(‘%cI am updated------ 我在選項裏寫的‘, style) }, methods: { changeName () { // 點擊是文本發生變化 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說明: %o`, noStyle, obj, arrowStyle ,tagLeftStyle, tagRightStyle(color), sourceNoStyle, detailStyle, detail) lineNo++ } // %c代表後面的文本,使用css樣式,%o代表對象輸出
上面的代碼只要調用tagVariable(...)
傳遞參數,就實現上圖的標簽效果,
還可以console.log
顯示圖片,加了一下講解圖方便理解;
通過調用上面封裝的函數在vue.js
某些時刻調用,就達到很好的效果
項目過程
我將整個過程分為四個階段: 構造函數階段
、初始化階段
、掛載階段
、更新階段
,
會以上面提到的例子貫穿的
構造函數階段
平常我們使用Vue
,都是用new Vue({})
,其實就是調用它的構造函數創建實例,如下圖
初始化階段
會對我們傳入data
、methods
等處理,便於後面階段的調用及一些功能的實現
如例子的data
的name
會被代理到vm
實例上,所以我們可以用this.name
data() {
return {
name: ‘點我‘,
}
}
掛載階段
<div id="app">
<div id="hi" @click="changeName">{{name}}</div>
</div>
會將上面的html
渲染成視圖(這裏面包括渲染函數,虛擬dom的實現等)
更新階段
點擊頁面上的文本時發生更新,這個過程包括:wathcer
的觸發、patch
算法對比新舊vnode
,更新dom
說明
具體的可以去看源碼,在github上,覺得可以的話幫忙star一下
參考文章: Vue技術內幕
Vue.js 源碼解析
用console.log分析Vue源碼