手写|手写 Vue 系列之从 Vue1 升级到 Vue2 手写Vue系列之从Vue1升级到Vue

前言上一篇文章手写 Vue 系列之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理，包括如下功能：

数据响应式拦截
- 普通对象
- 数组
数据响应式更新
- 依赖收集
  - Dep
  - Watcher
- 编译器
  - 文本节点
  - v-on:click
  - v-bind
  - v-model

在最后也详细讲解了 Vue1 的诞生以及存在的问题：Vue1.x 在中小型系统中性能会很好，定向更新 DOM 节点，但是大型系统由于 Watcher 太多，导致资源占用过多，性能下降。于是 Vue2 中通过引入 VNode 和 Diff 的来解决这个问题，
所以接下来的系列内容就是升级上一篇文章编写的 lyn-vue 框架，将它从 Vue1 升级到 Vue2。所以建议整个系列大家按顺序去阅读学习，如若强行阅读，可能会产生云里雾里的感觉，事倍功半。
另外欢迎关注以防迷路，同时系列文章都会收录到精通 Vue 技术栈的源码原理专栏，也欢迎关注该专栏。
目标升级后的框架需要将如下示例代码跑起来
示例

Lyn Vue2.0数据响应式更新原理 {{ t }} {{ t1 }} {{ arr }} methods + computed + 异步更新队列原理 {{ counter }} {{ doubleCounter }} {{ doubleCounter }} {{ doubleCounter }} v-bind 右键审查元素查看我的 title 属性 v-model 原理 {{ inputVal }} {{ isChecked }} {{ selectValue }}组件原理插槽原理

知识点
示例代码涉及的知识点包括：

基于模版解析的编译器
- 解析模版得到 AST
- 基于 AST 生成渲染函数
- render helper
  - _c，创建指定标签的 VNode
  - _v，创建文本节点的 VNode
  - _t，创建插槽节点的 VNode
- VNode
patch
- 原生标签和组件的初始渲染
  - v-model
  - v-bind
  - v-on
- diff
插槽原理
computed
异步更新队列

效果
【手写|手写 Vue 系列之从 Vue1 升级到 Vue2】示例代码最终的运行效果如下：

说明该框架只为讲解 Vue 的核心原理，没有什么健壮性可言，说不定你换个示例代码可能就会报错、跑不起来，但是用来学习是完全足够了，基本上把 Vue 的核心原理（知识点）都实现了一遍。
所以接下来就开始正式的学习之旅吧，加油！！
链接