用console.log分析Vue源码

cod7ce 发布于2019-08-23 14:13 / 2282人阅读

摘要：前言本文通过的一些特性结合的源码通过一个简单的例子让你了解的各个过程的变化控制台输出的效果图请用查看并打开控制台看效果演示地址准备的创建下载文件在中引入我写了一个简单的例子涵盖初始化视图点击后更新视图包括各个钩子函数代码如下

前言

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

请用chrome查看,并打开控制台看效果
演示地址

准备 vue-console.html的创建

下载vue.js文件,在vue-console.html中引入,我写了一个简单的例子,涵盖:初始化视图->点击后更新视图(包括各个钩子函数)
代码如下:

  
  
    {{name}}

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: "点我",
  }
}

挂载阶段


  {{name}}

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

更新阶段

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

说明

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

参考文章: Vue技术内幕
Vue.js 源码解析

GPU云服务器云服务器 console.log console.log() vue源码 vue webrtc 源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100280.html

vue2.0源码分析之理解响应式架构

摘要：分享前啰嗦我之前介绍过如何实现和。我们采用用最精简的代码，还原响应式架构实现以前写的那篇源码分析之如何实现和可以作为本次分享的参考。到现在为止，我们再看那张图是不是就清楚很多了总结我非常喜欢，以上代码为了好展示，都采用最简单的方式呈现。分享前啰嗦我之前介绍过vue1.0如何实现observer和watcher。本想继续写下去，可是vue2.0横空出世..所以直接看vue2.0吧...

chenatu 2019-08-20 11:57 评论0 收藏0
浅谈Vue.use

摘要：并且接收的参数的限制是两种类型。对于这两种类型有不同的处理。之后给这个插件添加至已经添加过的插件数组中，标示已经注册过最后返回对象。还有一种则是将所有逻辑都编写成一个函数暴露给。个人觉得第一种方式比较合理。先举个? 我们先来看一个简单的事例首先我使用官方脚手架新建一个项目vue init webpack vue-demo然后我创建两个文件index.js plugins.js.我将这...

MingjunYang 2019-08-21 17:55 评论0 收藏0
vue 源码自问自答-响应式原理

摘要：源码自问自答响应式原理最近看了源码和源码分析类的文章感觉明白了很多，但是仔细想想却说不出个所以然。会在对象的这个被获取时触发，会在这个对象的被修改时触发。在初始化时，将对象上的所有，都包装成拥有和的属性。 vue 源码自问自答-响应式原理最近看了 Vue 源码和源码分析类的文章,感觉明白了很多，但是仔细想想却说不出个所以然。所以打算把自己掌握的知识，试着组织成自己的语言表达出来不...

ityouknow 2019-08-23 12:39 评论0 收藏0
vue源码构建代码分析

这是xue源码学习记录，如有错误请指出，谢谢！相互学习相互进步。 vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库（vue通过flow来检测数据类型是否正确） ├── examples #demo ├── scripts #vue构建命令 ├── ... vue内部代码模...

RyanHoo 2019-08-23 12:22 评论0 收藏0
Vue的computed和watch的细节全面分析

摘要：定义是一个计算属性类似于过滤器对绑定到的数据进行处理用法不可在里面定义如果定义会报如下图片的错误因为对应的作为计算属性定义并返回对应的结果给这个变量变量不可被重复定义和赋值和用法回调函数当需要读取当前属性值是执行，根据相关数据计算并返回当前 1.computed 1.1 定义是一个计算属性,类似于过滤器,对绑定到view的数据进行处理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 评论0 收藏0