最近在收集少量资料来帮助自己了解和阅读 vue 的源码。在学习和阅读过程中，发现我们读解 vue 源码难度是在于很难找到一条主线将 vue 源码串起来，我想正在阅读 vue 源码的朋友也会有同样感受吧。这是由于这些造成大家在阅读 vue 源码的困难。其实我们只需把少量关键知识点搞清楚即可以一个一个突破来学习 vue 源码。

• 响应式原理

• 数据驱动

• 依赖收集和分发

• 组件化

• 渲染流程

那么要了解这些概念，我们需要具有那些知识呢?接下来逐个列出

• 理解事件发布订阅模式

• 了解函数式编程，例如柯里化，偏函数和高阶函数等概念

• AST 解析

• 熟习原生 javascript 的 API，可能我们学习 web 前台一路从 jQuery 到 vue 走来很少接触原生 javascript 对 dom 操作以及少量管理浏览器 API

• 熟习浏览器渲染机制，以及理解 javascript 引擎，这些知识有助于我们写出高性能的前台框架。

今天我们主要来解释 vue 是如何将 template 渲染到界面上，在开始之前我们先详情几件事

虚拟节点

我们为什么需要虚拟 DOM，也可以将其了解为虚拟节点。虚拟DOM 是 react 中引入的概念，这是由于 html DOM 元素过于重，我们通过虚拟 DOM 对真实 DOM 进行笼统，将少量必要属性笼统出来形成虚拟 DOM，而后根据虚拟 DOM 来生成真实的 DOM，我们通过响应式我们可以实现界面(html DOM 元素)是随着数据(data)变化而变化，这里所谓变化就是升级 DOM。我们可以通过比照数据变化前后所对应虚拟 DOM 间的不同，来准确地找到需要数据变化后需要升级 DOM 来对其进行升级。这样我们即可以以最小成原本在数据发生变化时来升级界面。

JSX VS 模板

模板相对于 JSX 要比较简单和固定，不那么灵活。而 JSX 中我们可以写少量 模板无法实现复杂逻辑。但是反过来想简单和固定也就意味我们不用花更多力气即可以将其解析。而复杂就意味着我们要应付哪些多变不确定情况。在 vue 中对模板和 JSX 都支持。