简答vue2和vue3的区别

背景

最近趁着“铜九铁十”，尽管没怎么准备，也还是抱着就投一投看看的心态投递了一下简历，由于简历中的技术栈主要是 Vue，面试官通常前几个问题就会问到Vue2Vue3的区别（最近面的包括阿里巴巴lazada和腾讯文档都问了），这算是一 个非常高频的问题了，下面简单总结一下，欢迎批评指正。

Vue3对比Vue2的区别

1、写法，Composition API，setup语法糖

2、响应式原理，Vue2 Object.defineProperty，Vue3 Proxy

3、diff算法优化，Vue2双端比较，Vue3最长递增子序列

4、模块化的API调用（可以有效地进行Tree Shaking）

5、生命周期变化

6、新增组件 Teleport、Suspense

7、允许多个根节点

8、代码编写更加接近原生，较灵活

9、性能提升、体积减小、更好的TS支持...

......

个人认为讲出以上这几点就大致差不多了，每一点都可以稍微展开讲几句，具体深入的可以根据面试官的追问继续回答。

Composition Api

Composition API （组合式API），相较于Vue2的 Options API（选项式API），在写法上利于功能逻辑的划分（开发和阅读体验较好），而不是将同一段功能实现的代码散乱于文件的不同位置中（开发和阅读时需要来回跳转）。

选项式API是对于熟悉Vue2的开发者来说非常友好的方式，因为它延续了Vue2的开发风格和习惯。你可以使用data、computed、methods等选项来组织你的组件逻辑，这种方式简单直观，容易上手。

而组合式API则更加注重代码的复用性和组织性。它通过使用函数式的API来定义组件逻辑，将相关的逻辑逐步抽象为可复用的函数，使得我们可以更好地组织和管理组件的功能。这种方式让我们能够更好地封装和复用逻辑，减少了代码的冗余，提高了开发效率。 FEF前端团队

响应式原理

Object.defineProperty（vue2），Proxy（vue3）

vue2是利用Object.defineProperty对data里的每个数据进行劫持，其中需要进行递归，当对象的属性很多或层级很深时，递归循环遍历的效率较低，性能不佳。此外，defineProperty只能对声明在data中的数据进行劫持，后续添加的的属性无法得到响应式，需要使用$set方法才可以（删除属性用$delete）。

优点：

1. 使用方便统一（vue3的ref需要.value、reactive不用）

缺点：

1. 递归、性能一般
2. 后续增加的属性没有响应式，需要依赖$set添加
3. 数组方法如push、pop等原本也不会触发响应式，vue对它们进行了重写
4. 通知更新过程需要维护大量 dep 实例和 watcher 实例，额外占用内存较多
5. 不支持 Map、Set 等数据结构

Object.defineProperty(data, 'property', {
    get() {
        // 获取数据
    }, 
    set(value) {
        // 设置数据 
    }
});

vue3是利用es6的Proxy，可以为整个对象创建代理对象，并设置get和set，在get和set中收集依赖和触发依赖， 性能上比defineProperty好些，兼容性差些（但随着浏览器发展，除了ie基本上也都支持了）

优点：

1. 性能上有了较大的提升（结合WeakMap、WeakSet）
2. 可以新增和删除属性，也有响应式
3. 可以监听原生数组变化

缺点：

1. 兼容性稍差
2. 基本数据类型需要另外处理 (ref)

const proxy = new Proxy(data, {
  get(target, key) {
    // 获取数据
  },
  set(target, key, value) {
    // 设置数据
  }
});

生命周期

vue2:

vue3：