用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代表对象输出
复制代码

项目过程

我将整个过程分为四个阶段: 构造函数阶段 、 初始化阶段 、 挂载阶段 、 更新阶段 , 会以上面提到的例子贯穿的

构造函数阶段

平常我们使用 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的实现等)