入口文件开始，分析Vue源码实现

nidaye 发布于2019-08-02 10:17 / 3195人阅读

摘要：一方面是因为想要克服自己的惰性，另一方面也是想重新温故一遍。一共分成了个基础部分，后续还会继续记录。文章中如果有笔误或者不正确的解释，也欢迎批评指正，共同进步。最后地址部分源码

Why?

网上现有的Vue源码解析文章一搜一大批，但是为什么我还要去做这样的事情呢？因为觉得纸上得来终觉浅，绝知此事要躬行。

然后平时的项目也主要是Vue，在使用Vue的过程中，也对其一些约定产生了一些疑问，可能官网上只会建议你这么做，但是核心实现我们可能并不知道。比如：

v-for key 是如何达到“就地复用”策略

数组更新检测是如何完成的

set 为什么就能动态添加根级别的响应式属性

为什么Vue可以跨平台支持weex，以及后来出现的mpvue

...

其次，很久没有更新内容了，之前对Vue源码也是有点研究，只不过没有很体系的记录，现在抽了点时间，做了一次基础的总结吧。一方面是因为想要克服自己的惰性，另一方面也是想重新温故一遍。

What？

一共分成了10个基础部分，后续还会继续记录。我们可以先看一下概览：

然后我们来看一下基础的目录：

入口开始，解读Vue源码（一）———— 造物创世

入口开始，解读Vue源码（二）—— new Vue 的故事

入口开始，解读Vue源码（三）—— initMixin 上篇

入口开始，解读Vue源码（三）—— initMixin 下篇

入口开始，解读Vue源码（四）—— 实现一个基础的 Vue 双向绑定

入口开始，解读Vue源码（五）—— $mount 内部实现

入口开始，解读Vue源码（六）—— $mount 内部实现 --- compile parse函数生成AST

入口开始，解读Vue源码（七）—— $mount 内部实现 --- compile optimize标记节点

入口开始，解读Vue源码（八）—— $mount 内部实现 --- compile generate 生成render函数

入口开始，解读Vue源码（九）—— $mount 内部实现 --- render函数 --> VNode

入口开始，解读Vue源码（十）—— $mount 内部实现 --- patch

End?

文章前后也是利用碎片时间总结整理而成，有些也是翻阅了很多的资料，也有过引用巨人的段落，文章中有所标注。如果没有标注，可能是本人忘记了，欢迎提醒。文章中如果有笔误或者不正确的解释，也欢迎批评指正，共同进步。

最后：

github地址

部分源码demo

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

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

入口文件开始，分析Vue源码实现

摘要：一方面是因为想要克服自己的惰性，另一方面也是想重新温故一遍。一共分成了个基础部分，后续还会继续记录。文章中如果有笔误或者不正确的解释，也欢迎批评指正，共同进步。最后地址部分源码 Why? 网上现有的Vue源码解析文章一搜一大批，但是为什么我还要去做这样的事情呢？因为觉得纸上得来终觉浅，绝知此事要躬行。然后平时的项目也主要是Vue，在使用Vue的过程中，也对其一些约定产生了一些疑问，可...

Karrdy 2019-08-22 16:41 评论0 收藏0
来一打前端博客压压惊

前言本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多，有一段时间没有更新了，后面打算继续不断学习更新，欢迎小伙伴一起沟通交流~ 最近更新前端单测的那些事基于virtual dom 的canvas渲染 js Event loop 机制简介 axios 核心源码实现原理 JS 数据类型、赋值、深拷贝和浅拷贝 j...

wangbinke 2019-08-29 16:58 评论0 收藏0
来一打前端博客压压惊

前言本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多，有一段时间没有更新了，后面打算继续不断学习更新，欢迎小伙伴一起沟通交流~ 最近更新前端单测的那些事基于virtual dom 的canvas渲染 js Event loop 机制简介 axios 核心源码实现原理 JS 数据类型、赋值、深拷贝和浅拷贝 j...

villainhr 2019-08-02 11:42 评论0 收藏0
来一打前端博客压压惊

前言本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多，有一段时间没有更新了，后面打算继续不断学习更新，欢迎小伙伴一起沟通交流~ 最近更新前端单测的那些事基于virtual dom 的canvas渲染 js Event loop 机制简介 axios 核心源码实现原理 JS 数据类型、赋值、深拷贝和浅拷贝 j...

xiaoqibTn 2019-08-23 12:21 评论0 收藏0
vue-cli 3.0 源码分析

摘要：写在前面其实最开始不是特意来研究的源码，只是想了解下的命令，如果想要了解命令的话，那么绕不开写的。通过分析发现与相比，变化太大了，通过引入插件系统，可以让开发者利用其暴露的对项目进行扩展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 写在前面其实最开始不是特意来研究 vue-cli 的源码，只是想了解下 n...

yiliang 2019-08-23 15:11 评论0 收藏0