用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 源码解析
用console.log分析Vue源码的更多相关文章
- 入口文件开始,分析Vue源码实现
Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...
- [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST
本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...
- [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串
本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
- vue源码构建代码分析
这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...
- 前端Vue 源码分析-逻辑层
Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...
- [Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
随机推荐
- bzoj1457: 棋盘游戏 SG函数 Nim
Code: #include<cstdio> #include<cstring> using namespace std; #define maxn 1003 #define ...
- POJ-1182 食物链 并查集(互相关联的并查集写法)
题目链接:https://cn.vjudge.net/problem/POJ-1182 题意 中文题目,就不写了哈哈 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃 ...
- numpy基础篇-简单入门教程3
np import numpy as np np.__version__ print(np.__version__) # 1.15.2 numpy.arange(start, stop, step, ...
- 用Google Chrome 浏览器打开Unity打包的WebGL
方法一: 直接build and run 方法二: 步骤: 1.打开浏览器的属性 2.在目标的位置添加--allow-file-access-from-files, 注意--allow-file-ac ...
- silverlight wcf mvvm
近期工作比較忙.也没有时间发表新内容,今天有点时间,就顺便写点,说说近期开发的一套系统心得. 我刚去这个公司已经将前端确定要用Silverlight,我不知道为什么要选择这个,或许是为以后转C/S系统 ...
- POJ2369 Permutations【置换群】
题目链接: http://poj.org/problem?id=2369 题目大意: 给定一个序列.问最少须要多少次置换才干变为 1.2.-.N 的有序序列.比方说给 定5个数的序列 4 1 5 2 ...
- centos7;windows下安装和使用spice
感谢朋友支持本博客,欢迎共同探讨交流,因为能力和时间有限,错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...
- [9]EC_屏蔽ecshop云提示no_license
安装完后,打开后台就看到这个,特别烦,想立刻干掉它. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdXB0b255dWFu/font/5a6L5L2T/f ...
- 用 shell 获取本机的网卡名称
用 shell 获取本机的网卡名称 # 用 shell 获取本机的网卡名称 ls /sys/class/net # 或者 ifconfig | grep "Link" | awk ...
- url与图片
http://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=750*300& ...