前言

本文通过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({}),其实就是调用它的构造函数创建实例,如下图

初始化阶段

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

如例子的dataname会被代理到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源码的更多相关文章

  1. 入口文件开始,分析Vue源码实现

    Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...

  2. [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST

    本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...

  3. [Vue源码]一起来学Vue模板编译原理(二)-AST生成Render字符串

    本文我们一起通过学习Vue模板编译原理(二)-AST生成Render字符串来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学V ...

  4. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  5. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  6. vue源码构建代码分析

    这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...

  7. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  8. [Vue源码分析] v-model实现原理

    最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...

  9. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

随机推荐

  1. ReactiveCocoa 中 RACSignal 是如何发送信号的

    https://juejin.im/post/5829f4c3570c350063c436ac 前言 ReactiveCocoa是一个(第一个?)将函数响应式编程范例带入Objective-C的开源库 ...

  2. iOS 集成Protobuf,转换proto文件

    原文地址:http://blog.csdn.net/hyq4412/article/details/54891038 附加Homebrew安装地址:https://brew.sh/index_zh-c ...

  3. Express的初步使用

    废话不多说直接上步骤: 1. 首先建立一个新文件夹,进入此文件夹的命令窗口通过 npm init 命令为你的应用创建一个           package.json 文件,然后下载express模块 ...

  4. 题解 P1179 【数字统计】

    嚯嚯嚯,这道题很显然是削弱版的51nod P1042. 那么显然我们需要使用数位DP解题. 思路大致是这样的: 对于每一个数字,考虑三种影响关系: 1. 它对低位的影响 2. 它对高位的影响 3. 高 ...

  5. POJ——T 1988 Cube Stacking

    http://poj.org/problem?id=1988 Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 25865   ...

  6. 一 Balancer regionCountCost 权重。

    原文如下地址 : http://www.cnblogs.com/cenyuhai/p/3650943.html 看源码很久了,终于开始动手写博客了,为什么是先写负载均衡呢,因为一个室友入职新公司了,然 ...

  7. 使用commons-email发邮件

    这里我用到了两个包: commons-email-1.3.2.jar mail-1.4.1.jar 如果不加mail.jar,就可能会抛出NoClassDefFoundError异常 之后代码引用ht ...

  8. 解析XML文件之使用DOM解析器

    在前面的文章中.介绍了使用SAX解析器对XML文件进行解析.SAX解析器的长处就是占用内存小.这篇文章主要介绍使用DOM解析器对XML文件进行解析. DOM解析器的长处可能是理解起来比較的直观,当然, ...

  9. Codeforces 558C Amr and Chemistry 全都变相等

     题意:给定一个数列,每次操作仅仅能将某个数乘以2或者除以2(向下取整). 求最小的操作次数使得全部的数都变为同样值. 比赛的时候最后没实现.唉.之后才A掉.開始一直在想二分次数,可是半天想不出怎 ...

  10. ORA-01555错误总结(二)

    这篇文章紧接着上一篇"ORA-01555错误总结(一)".主要描写叙述延迟块清除导致的ORA-01555错误. 以下是一些简介(上一遍已经介绍过) ORA-01555错误是一种在o ...