用console.log看Vue
摘要：
本文通過 console.log 的一些特性,結合 vue.js 的原始碼,通過一個簡單的例子,讓你瞭解 Vue 的各個過程的變化.
控制檯輸出的效果圖
請用chrome檢視,並開啟控制檯看效果演示地址
準備
vue-con...
本文通過 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的實現等)
