（四）vue2与vue3的区别-CSDN博客

1、生命周期

（1）生命周期名称：
vue3大部分生命周期只是vue2的名称上 + “on”，功能上类似。

vue2	vue3
beforeCreate
created
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestory	onBeforeUnmount
destoryed	onUnmounted

setup是围绕beforeCreate 和created生命周期钩子运行的，所以不需要显式的去定义

（2）生命周期使用：
	vue3在组合式API（Composition API）中使用必须先引入。
	vue2在选项是API（Options API 中）可以直接调用。

2、碎片化（是否支持多跟节点）

vue3支持碎片（Fragments） ，就是说可以拥有多个根节点。
vue2不支持碎片化。

3、数据双向绑定原理

Vue2 响应式原理的基础是Object.defineProperty；
Vue3响应式原理的基础是Proxy。

Object.defineProperty基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。

Object.defineProperty(obj, "name", {
  enumerable: true, // 可枚举（是否可通过for...in或Object.keys()进行访问）
  configurable: true, // 可配置 （是否可使用delete删除，是否可再次设置属性）
  value: "", //任意类型的值，默认udefined
  writable: true, //可重写
  get() {
    return name;
  },
  set(value) {
    name = value;
  },
});

== 注意： writable 和 value 与 getter 和 setter 不共存。==
vue2源码
在这里插入图片描述

vue2 响应解决方案:对数组原型方法push、pop、shift、unshift、splice、sort、reverse进行了hack处理，提供了Vue.set监听对象/数组新增属性。对象的新增/删除响应，还可以new个新对象，新增则合并新属性和旧对象；删除则将删除属性后的对象深拷贝给新对象。

Proxy Proxy 是 ES6 新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性。

消除的局限性：
(1)、对象/数组的新增、删除
(2)、监测 .length 修改
(3)、Map、Set、WeakMap、WeakSet 的支持
基本用法：创建对象的代理，从而实现基本操作的拦截和自定义操作。

4、API类型

vue2是选项式API（options API），一个逻辑会散乱在文件的不同位置
（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。
vue3采用组合式API（Compostion API ）则可以将同一逻辑内容写到一起，
增强了代码的可读性，内聚性，其还提供了较为完美的逻辑复用性方案。

5、定义数据变量和方法的实现

vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){} ，创建的方法要在methods:{} 中。
vue3：，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：
从vue引入reactive；
使用reactive() 方法来声明数据为响应性数据；
使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

6、父子传参

vue2：父传子，用props,子传父用事件 Emitting Events。
在vue2中，会调用this$emit然后传入事件名和对象。

vue3：父传子，用props,子传父用事件 Emitting Events。
在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽

vue2：vue2中使用slot可以直接使用slot；
v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：vue3中必须使用v-slot的形式；
vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；
vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；
vue3中移除v-on.native修饰符；
vue3中移除过滤器filter。

8、main.js文件

vue2：vue2中我们可以使用pototype(原型) 的形式去进行操作，引入的是构造函数。

vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。

9、异步组件（Suspense）

Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。

10、Teleport

Vue3 提供 Teleport 组件可将部分 DOM 移动到 Vue app 之外的位置。比如项目中常见的 Dialog 弹窗。
在这里插入图片描述

11、虚拟DOM

Vue3 相比于 Vue2，虚拟DOM上增加 patchFlag 字段。我们借助Vue3 Template Explorer来看。
在这里插入图片描述

字段类型情况：1 代表节点为动态文本节点，那在 diff 过程中，只需比对文本对容，无需关注 class、style等。除此之外，发现所有的静态节点（HOISTED 为 -1），都保存为一个变量进行静态提升，可在重新渲染时直接引用，无需重新创建。

12、事件缓存

Vue3 的cacheHandler可在第一次渲染后缓存我们的事件。相比于 Vue2 无需每次渲染都传递一个新函数。加一个 click 事件。

13、Diff算法优化

14、打包优化

Tree-shaking：模块打包 webpack、rollup 等中的概念。移除 JavaScript 上下文中未引用的代码。主要依赖于 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

以 nextTick 为例子，在 Vue2 中，全局API暴露在Vue实例上，即使未使用，也无法通过 tree-shaking 进行消除。

Vue3 中针对全局和内部的API进行了重构，并考虑到 tree-shaking 的支持。因此，全局API现在只能作为ES模块构建的命名导出进行访问。
通过这一更改，只要模块绑定器支持 tree-shaking，则Vue应用程序中未使用的 api 将从最终的捆绑包中消除，获得最佳文件大小。

受此更改影响的全局API如下所示。

Vue.nextTick
Vue.observable （用 Vue.reactive 替换）
Vue.version
Vue.compile （仅全构建）
Vue.set （仅兼容构建）
Vue.delete （仅兼容构建）
内部API也有诸如 transition、v-model 等标签或者指令被命名导出。只有在程序真正使用才会被捆绑打包。Vue3 将所有运行功能打包也只有约22.5kb，比 Vue2 轻量很多。

15、TypeScript支持

Vue3 由 TypeScript 重写，相对于 Vue2 有更好的 TypeScript 支持。

Vue2 Options API 中 option 是个简单对象，而 TypeScript 是一种类型系统，面向对象的语法，不是特别匹配。

Vue2 需要vue-class-component强化vue原生组件，也需要vue-property-decorator增加更多结合Vue特性的装饰器，写法比较繁琐。

拓展阅读

setup()函数特性

setup()函数接收两个参数：props、context(包含attrs、slots、emit)。
setup函数是处于生命周期beforeCreated和created俩个钩子函数之前。
执行setup时，组件实例尚未被创建（在setup()内部，this不会是该活跃实例得引用，即不指向vue实例，Vue为了避免我们错误得使用，直接将setup函数中得this修改成了undefined）。
与模板一起使用时，需要返回一个对象。
因为setup函数中，props是响应式得，当传入新的prop时，它将会被更新，所以不能使用es6解构，
因为它会消除prop得响应性，如需解构prop，可以通过使用setup函数中得toRefs来完成此操作。
在setup()内使用响应式数据时，需要通过 .value 获取。
从setup() 中返回得对象上得property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加.value。
setup函数只能是同步的不能是异步的。

https://blog.csdn.net/m0_73727623/article/details/128679202
https://www.cnblogs.com/lmj9911/p/17105191.html