Vue2 编译器教程系列，有哪些具体内容？

本文共计3108个文字，预计阅读时间需要13分钟。

完成+Vue2+编译器的简易实现，从字符串模板解析开始，最终得到+`render`+函数。前言+接下来就要正式进入手写+Vue2+系列了。这里不会从零开始，会基于+lyn-vue+直接进行升级，所以+‘+’等特殊符号需要替换。

完成 Vue2 编译器的一个简版实现，从字符串模版解析开始，到最终得到 `render` 函数。 前言

接下来就要正式进入手写 Vue2 系列了。这里不会从零开始，会基于 lyn-vue 直接进行升级，所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x，请先从这篇文章开始，按照顺序进行学习。

都知道，Vue1 存在的问题就是在大型应用中 Watcher 太多，如果不清楚其原理请查看 手写 Vue 系列 之 Vue1.x。

所以在 Vue2 中通过引入了 VNode 和 diff 算法来解决该问题。通过降低 Watcher 的粒度，一个组件对应一个 Watcher（渲染 Watcher），这样就不会出现大型页面 Watcher 太多导致性能下降的问题。

在 Vue1 中，Watcher 和 页面中的响应式数据一一对应，当响应式数据发生改变，Dep 通知 Watcher 完成对应的 DOM 更新。但是在 Vue2 中一个组件对应一个 Watcher，当响应式数据发生改变时，Watcher 并不知道这个响应式数据在组件中的什么位置，那又该如何完成更新呢？

阅读过之前的 源码系列，大家肯定都知道，Vue2 引入了 VNode 和 diff 算法，将组件 编译 成 VNode，每次响应式数据发生变化时，会生成新的 VNode，通过 diff 算法对比新旧 VNode，找出其中发生改变的地方，然后执行对应的 DOM 操作完成更新。

所以，到这里大家也能明白，Vue1 和 Vue2 在核心的数据响应式部分其实没什么变化，主要的变动在编译器部分。

目标

完成 Vue2 编译器的一个简版实现，从字符串模版解析开始，到最终得到 render 函数。