Vue源码必知必会

[libin1991]

介绍

Vue.js源码分析，记录了个人学习Vue.js源码的过程中的一些心得以及收获。以及对于Vue框架，周边库的一些学习心得和个人见解。

在学习的过程中我分别为Vue.js、Vuex、Vue-router加上了注释，分别在文件夹vue-src、vuex-src以及vue-router-src中，希望可以帮助有需要的同学更好地学习理解Vue.js及周边库的源码。

感谢尤大提高生产力。

当前Vue.js源码版本2.3.0，Vuex版本为2.4.0，Vue-router版本为3.0.1。

本项目希望对Vue.js做更进一步的探索与学习，Vue.js基础内容请参考Vue.js官网，https://cn.vuejs.org/v2/guide/。 可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。

目录

源码相关

Vue.js响应式原理

Vue.js依赖收集

从Vue.js源码角度再看数据绑定

Vue.js事件机制

VNode节点(Vue.js实现)

Virtual DOM与diff(Vue.js实现)

聊聊Vue.js的template编译

Vue.js异步更新DOM策略及nextTick

从template到DOM（Vue.js源码角度看内部运行机制）

Vuex源码解析

随笔杂谈

Vue组件间通信

说说element组件库broadcast与dispatch

该源码分析，会带着大家一起学习Vue的大部分代码，而不是简单的讲一下它的原理，我会尽可能的多解释每一行主要的代码含义，另外一些辅助方法什么的，大家可以在学习的过程中，自己看一眼就知道了。

Vue源码目录结构整理

从入口文件查看Vue源码

从小栗子查看Vue的生命周期

双向数据绑定

compile概述

compile——生成ast

compile——优化静态内容

compile——生成render字符串

vdom概述

Vue.extend

vdom——VNode

children的归一化处理

patch——创建dom

patch——diff

patch——自定义组件的处理流程

事件处理

指令的处理

directives概述

自定义指令

v-for

v-if

v-once

v-show

v-text、v-html、v-cloak、v-pre

v-model

内置组件和标签

slot和作用域插槽

keep-alive

以下是整理一些比较零散的数据，主要是记录结构中每个数据表示什么意思，会不断完善更新：

Vue全局属性

Vue实例属性

AstElement

VNode