Vue 3 学习 源码解读

 该文章内容为以下视频的学习笔记： 

 前言_哔哩哔哩_bilibili前言是秋招解决方案：深入 Vue3 源码，带你彻底打通 Vue3 源码面试的第1集视频，该合集共计13集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV1D8411B7Tx?p=1&vd_source=4298755c4e2edc1fe805c41cc2d7379a

 

1.Vue2 和 Vue3 的区别

• 先明确改变的地方很多，并进行列举
• 然后从两个重点问题中进行回答
• 最后进行一个总结收尾

vue3 使用 TS 进行了完全的重构，改变的地方还是挺多的，比如：

1. 新增的 Composition API（注意：vue3 也支持 Options API）

2. 模块化的 API 调用（可以有效的进行 TreeShaking）

3. 基于 Fragment 的多个根标签

4. 响应式的实现原理

5. diff 算法优化

6. 生命周期的变化

7. 新增的一些组件，比如：teleport、suspense 这些

8. .....

主要两个比较核心的变化：

1. 响应式实现原理的改变

2. diff 算法优化的变化

---

（1）响应式原理：

在 vue2 中响应式核心还是通过 Object.defineProperty 进行实现的。通过 data 方法返回的对象作为 target。这样无论是 简单数据类型 还是 复杂数据类型 ，都可以直接通过  Object.defineProperty 监听 getter 和 setter 行为。

但是，由于  Object.defineProperty 只能监听指定对象、指定属性的响应性，所以 vue 需要对 data 中返回的复杂数据类型进行循环监听。

那么这样，当我们为响应式数据 动态新增属性（为对象新增一个之前不存在的属性，文档）时，会出现失去响应性的问题。

那么为了解决这个问题，vue2 增加了 Vue.set 的 API ，相当于主动触发了一次 Object.defineProperty。但是，这种方式其实并不方便，需要用户主动触发。

所以，vue3 中改用了 Proxy（也是因为浏览器逐渐升级，不再需要过分兼容旧的浏览器）。利用 Proxy 代理的特性解决了这个问题。

---

（2）diff 算法的优化：

Vue2 中的 diff 大家都喜欢把它叫做 双端 Diff 对比 。大致的思路是通过：新旧两组节点的四个端点（新节点组的开头、新节点组的结尾、旧节点组的开头、旧节点组的结尾） 进行对比，并试图找到可以复用的节点。

而 Vue3 中的 diff 大家都喜欢叫它做 快速 Diff

（注意：快速 diff 并不是官网声明的名字，只是国内都这么叫）。里面涉及到了  最长递增子序列 的概念，整体还是有点复杂的。

总体来说，Vue3 带来的变化很大。通过 Composition API，特别是 3.2 之后新增了