用console.log分析Vue源码

时间:2023-12-04 10:35:38

前言

本文通过console.log的一些特性,结合vue.js的源码,通过一个简单的例子,让你了解Vue的各个过程的变化.

控制台输出的效果图

用console.log分析Vue源码

用console.log分析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代表对象输出

用console.log分析Vue源码

上面的代码只要调用tagVariable(...)传递参数,就实现上图的标签效果,

还可以console.log显示图片,加了一下讲解图方便理解;

用console.log分析Vue源码

通过调用上面封装的函数在vue.js某些时刻调用,就达到很好的效果

项目过程

我将整个过程分为四个阶段: 构造函数阶段初始化阶段挂载阶段更新阶段,

会以上面提到的例子贯穿的

构造函数阶段

平常我们使用Vue,都是用new Vue({}),其实就是调用它的构造函数创建实例,如下图

用console.log分析Vue源码

初始化阶段

会对我们传入datamethods等处理,便于后面阶段的调用及一些功能的实现

如例子的dataname会被代理到vm实例上,所以我们可以用this.name调用

data() {
return {
name: '点我',
}
}

用console.log分析Vue源码

挂载阶段

<div id="app">
<div id="hi" @click="changeName">{{name}}</div>
</div>

会将上面的html渲染成视图(这里面包括渲染函数,虚拟dom的实现等)

用console.log分析Vue源码

更新阶段

点击页面上的文本时发生更新,这个过程包括:wathcer的触发、patch算法对比新旧vnode,更新dom

用console.log分析Vue源码

说明

具体的可以去看源码,在github上,觉得可以的话帮忙star一下

参考文章: Vue技术内幕

Vue.js 源码解析