文档章节

Vue源码学习(零):内部原理解析

o
 osc_pn11u1x9
发布于 2018/08/08 19:41
字数 674
阅读 24
收藏 0

精选30+云产品,助力企业轻松上云!>>>

本篇文章是在阅读《剖析 Vue.js 内部运行机制》小册子后总结所得,想要了解详细内容,请参考原文:https://juejin.im/book/5a36661851882538e2259c0f

  • 阅读源码前想要先了解Vue的内部机制和运行原理,帮助更快更有针对性的阅读源码
  • 所以就找到了上面的小册子,小册子里主要是简化版的源码
  • 这篇文章更主要是对小册子消化后的个人笔记和总结,大部分内容是使用流程图等对Vue运行的整体流程和各个阶段做更加直观的展示

 

 

下面对上图所示的整体流程做简单介绍:

一、主要步骤

1、初始化

vue初始化init的过程包含生命周期、事件、 props、 methods、 data、 computed 与 watch等的初始化,

其中最主要的两个步骤是watch的初始化和data属性的observer过程,这两个过程是实现响应式和依赖收集的基础

2、编译

编译是将template转变为render function的过程,包括:解释、优化、生成三个步骤

解释:template->AST(抽象语法树)

优化:标记AST中的静态(static)节点

生成:AST->render function

3、render function执行

render function执行后生成虚拟节点树(Vnode DOM Tree)

4、渲染展现页面

至此,页面展示在浏览器中

 

二、依赖收集过程

整体流程图中render function执行开始的绿色箭头指向的流程为依赖收集过程

1、render function执行中会依次调用使用到的data.attr的get方法

2、get方法调用Dep.add将Vue对象中的watch加入到attr.Dep数组里

3、整个页面渲染完毕后,所有需要使用attr的组件Vue对象的watch都收集到attr.Dep,attr.Dep内容即为template与data的依赖关系

 

三、响应式原理

整体流程图中attr.set()执行开始的红色箭头指向的流程为响应式原理

1、对data.attr赋值即调用attr.set方法

2、attr.set会调用Dep.notify(),notify方法是依次执行attr.Dep数组中watch对象的update方法

3、update()是重新渲染视图的过程,中间生成新的Vnode DOM Tree,供patch使用

 

四、update中的patch

patch,是将update产生的New Vnode节点与上一次渲染的Old Vnode进行对比的过程,最终只有对比后的差异节点才会被更新到视图上,从而达到提高update性能的目的 

 

五、主要内容图解

1、编译过程

 

2、依赖收集及响应式原理

3、批量异步更新策略及 nextTick 原理

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue.js 源码解析

介绍 Vue.js源码分析,记录了个人学习Vue.js源码的过程中的一些心得以及收获。以及对于Vue框架,周边库的一些个人见解。 在学习的过程中我为Vue.js(2.3.0)、Vuex(2.4.0)、Vue-router(3...

大灰狼的小绵羊哥哥
2018/11/13
0
0
剖析 Vue.js 内部运行机制

对于没有阅读过源码或者没有阅读大型项目源码经历的新手同学,怎样帮助他们上手研究 Vue.js 源码?如果上来就像《Vue.js 源码解析》一样,采用通篇的源码加上注释的方式讲解,不但会导致文章...

玄学酱
2018/06/21
0
0
来一打前端博客压压惊

前言 本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多,有一段时间没有更新了,后面打算继续不断学习更新,欢迎小伙伴一起沟通交流~ 最...

osc_wme0cmft
2018/10/15
3
0
来一打前端博客压压惊

前言 本文所有内容全部发布再个人博客主页 github.com/muwoo/blogs 欢迎订阅。不过最近因为事情比较多,有一段时间没有更新了,后面打算继续不断学习更新,欢迎小伙伴一起沟通交流~ 最近更新...

muwoo
2018/10/12
0
0
Vue2.x源码解析系列

原文https://github.com/lihongxun945/myblog 这里都是每周读书笔记性质的博客,以前端知识为主,记录每周学习的各种零碎知识。(按时间倒序) Vue3.0开发路线发布 关于Vue和React区别的一些...

大灰狼的小绵羊哥哥
2018/11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux安装redis服务器和部署

Linux安装redis和部署 第一步:下载安装包 wget http://download.redis.io/releases/redis-5.0.5.tar.gz 访问https://redis.io/download 到官网进行下载。这里下载最新的5.0.5版本. 第二步:...

osc_3ytpwpyb
15分钟前
11
0
IF函数,根据条件设定输入内容

if函数通常用于条件判断,根据判断结果执行相应命令。 1.函数解释: IF(logical_test, [value_if_true], [value_if_false]) logical_test 必需。 计算结果为 TRUE 或 FALSE 的任何值或表达式...

osc_sumf8h95
17分钟前
5
0
Pytorch自定义dataloader以及在迭代过程中返回image的name

pytorch官方给的加载数据的方式是已经定义好的dataset以及loader,如何加载自己本地的图片以及label? 形如数据格式为 image1 label1 image2 label2 ... imagen labeln 实验中我采用的数据的...

osc_l8u38961
18分钟前
0
0
灯塔

\[love\ and \ share \] 我怎么感觉变成了好东西推荐呢?算了,本来也差不多 还没写完,想到再更 有好看玩的能不能评论一下,qwq 动漫 大多是些国漫,多在\(b\)站、腾讯视频、盗版小网站能够...

osc_dc6pbw3x
19分钟前
0
0
网易首页 」 网易手机 」 正文 苹果超薄触摸显示技术专利曝光:重新定义轻薄

最近,苹果公司的新屏幕专利技术已经曝光。特别是苹果公司的新型超薄触摸技术,它可以降低显示器的结构水平,消除多余的电路,并使屏幕更薄。该专利表明,这项新技术适用于iPhone,iPad,App...

osc_opzpp18v
21分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部