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

前言

上一篇文章 手写 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 技术栈的源码原理 专栏，也欢迎关注该专栏。

目标

升级后的框架需要将如下示例代码跑起来

示例

  
  



  

    
数据响应式更新 原理
    
{{ t }}
    
{{ t1 }}
    
{{ arr }}
    
methods + computed + 异步更新队列 原理
    

      
{{ counter }}
      
{{ doubleCounter }}
      
{{ doubleCounter }}
      
{{ doubleCounter }}
       Add 
       Minus 
    
    
v-bind
    右键审查元素查看我的 title 属性
    
v-model 原理
    

      
      
{{ inputVal }}
    
    

      
      
{{ isChecked }}
    
    

      
        1
        2
        3
      
      
{{ selectValue }}
    
    
组件 原理
    
    
插槽 原理
    
    
      
    
  
  

知识点

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

• 基于模版解析的编译器

  • 解析模版得到 AST

  • 基于 AST 生成渲染函数

  • render helper

    • _c，创建指定标签的 VNode

    • _v，创建文本节点的 VNode

    • _t，创建插槽节点的 VNode

  • VNode

• patch

  • 原生标签和组件的初始渲染

    • v-model

    • v-bind

    • v-on

  • diff

• 插槽原理

• computed

• 异步更新队列

效果

示例代码最终的运行效果如下：

说明

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

所以接下来就开始正式的学习之旅吧，加油！！

链接

• 配套视频，微信公众号回复："精通 Vue 技术栈源码原理视频版" 获取
• 精通 Vue 技术栈源码原理 专栏
• github 仓库 liyongning/Vue 欢迎 Star
• github 仓库 liyongning/Lyn-Vue-DOM 欢迎 Star
• github 仓库 liyongning/Lyn-Vue-Template 欢迎 Star

感谢各位的：关注、点赞、收藏和评论，我们下期见。

---

当学习成为了习惯，知识也就变成了常识。 感谢各位的 关注、 点赞、收藏和评论。

新视频和文章会第一时间在微信公众号发送，欢迎关注：李永宁lyn

文章已收录到 github 仓库 liyongning/blog，欢迎 Watch 和 Star。