Vue.js 是现代化的 JavaScript 前端框架之一，具备双向数据绑定、组件化等重要特征。Vue.js 源码作为其十分重要的组成部分，其了解和学习，对于 advanced front-end developer 培养非常重要。
Vue.js 源码初步分析
Vue.js 的源码分为两个部分，分别是 Runtime + Compiler 与 Runtime-only。其中，Runtime + Compiler 这个版本包含了有 Vue.js 特有的编译器，可以将模板字符串编译成渲染函数。Runtime-only 则没有编译器，需要通过外部工具编译。
Vue.js 的源码中有很多文件，其中入口文件 src/index.js 负责定义 Vue.js 的全局变量 Vue 并注册全局 API。
-- -------------------- ---- -------
------ --- ---- ------------------
------ - ------------- - ---- --------------------
------ - ----------------- - ---- ---------------
------------------
------------------------------------ ------------ -
---- -----------------
--
------------------------------------ -------------- -
--- -- -
-- -------- ------ ---- --
------ ----------- -- ----------------------
-
--
----------- - -------------
------ ------- ---Vue.js 的源码非常长且复杂，但是我们只需要重点关注 src/core/ 目录下的文件夹与文件，它们是 Vue.js 的核心部分。
Vue.js 主要框架解释
响应式类对象
Vue.js 的数据响应式机制是通过一个 Observer 类完成的，它将对象转化为响应式对象。
-- -------------------- ---- -------
-------- ------- ------- ----------- -
-- ----------------- -- ----- ---------- ------ -
------
-
--- --
-- -------------- --------- -- ------------ ---------- --------- -
-- - ------------
- ---- -- -
------------- --
-------------------- --
--------------------- -- --------------------- --
-------------------------- --
-------------
- -
-- - --- ---------------
-
-- ----------- -- --- -
------------
-
------ --
-Observer 会在初始化时为目标值添加一个“观察者”，该“观察者”会将其本身添加到目标值的观察者列表中，并对目标值上的每个属性进行遍历和响应式处理。在开发过程中，如果要想在 Vue.js 中创建响应式类对象，只需要调用 Vue.observable() 方法即可。
虚拟 DOM
Vue.js 的 Virttual DOM（虚拟 DOM）采用了 diff 算法打造，是 Vue.js 作者尤雨溪开发的 snabbdom 库的改进版。在 Vue.js 中，虚拟 DOM 是 VNode 类的实例对象。在渲染数据的过程中，Vue.js 会将真实 DOM 和虚拟 DOM 进行比对，从而找出数据受到哪些字段的影响，避免多余的操作。
Vue.js 的渲染器是由 Compile 类实现的，它可以通过解析 AST 节点来生成虚拟 DOM，然后用虚拟 DOM 更新实际 DOM。
组件
组件是 Vue.js 最大的特色之一，它将页面划分成一个个小的组件，每个组件都可以拥有自己的状态和行为。在 Vue.js 中，每个组件都由一个 options 对象表示，其中包括了组件的指令、钩子、组件名等。
在 Vue.js 中，继承自 Vue 类的所有子类，都是 Vue.js 组件的基础。在开发过程中，可以使用 Vue.extend() 方法创建组件类并进行内部传参。
const Component = Vue.extend({
template: '<div>{{ text }}</div>',
data: function () {
return {
text: 'Hello World!'
}
}
})结论：Vue.js 源码作为现代化的 JavaScript 前端框架，具备响应式类对象、虚拟 DOM 和组件等重要特性，其对前端 Developer 的培养是非常重要的。因此，在开发过程中学习和掌握 Vue.js 源码，对我们提升开发质量和效率都有重要意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67510f19050cf9039c19ba92