Vue 3 学习 源码解读

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 之后新增了 

你可能感兴趣的:(vue.js,学习,javascript)