前言本文通过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 源码解析