用console.log分析Vue源碼

前言

本文通過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 源碼解析