2020 一起读 vue 源码

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

• 响应式原理

• 数据驱动

• 依赖收集和分发

• 组件化

• 渲染流程

image

那么要理解这些概念，我们需要具备那些知识呢?接下来一一列出

• 了解事件发布订阅模式

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

• AST 解析

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

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

image

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

虚拟节点

我们为什么需要虚拟 DOM，也可以将其理解为虚拟节点。虚拟DOM 是 react 中引入的概念，这是因为 html DOM 元素过于重，我们通过虚拟 DOM 对真实 DOM 进行抽象，将一些必要属性抽象出来形成虚拟 DOM，然后根据虚拟 DOM 来生成真实的 DOM，我们通过响应式我们可以实现界面(html DOM 元素)是随着数据(data)变化而变化，这里所谓变化就是更新 DOM。我们可以通过对比数据变化前后所对应虚拟 DOM 间的不同，来精确地找到需要数据变化后需要更新 DOM 来对其进行更新。这样我们就可以以最小成本来在数据发生变化时来更新界面。

image

JSX VS 模板

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

vuejs-logo.png