Vue2和Vue3的区别

vue3在2022年被提升为新的默认版本，所以我们前端开发者也将在未来更多的使用vue3来搭建以及开发项目。首先了解vue2和vue3的区别是很重要的，因为vue2中可以使用vue3的方法，但是vue3不能使用vue2。

目录

创建方式

语法差异

TypeScript

api方面

根结点

生命周期

key在template和v-if上的使用

双向数据绑定

响应式数据

全局API

---

创建方式

vue2

• 最常用的脚手架是Vue CLI 2，他是基于Node.js的命令行工具。Vue CLI 2使用Webpack作为默认的打包工具，并提供了一些预配置模板选项
• webpack是开始的入口文件，然后分析路由，然后模块，最后进行打包

vue3

• Vue 3引入了全新的脚手架工具Vue CLI 3，它提供了更强大的插件系统，可以根据需要选择和安装插件，Vue CLI 3默认使用了Webpack 4作为打包工具，还支持更多的模块打包工具选项，如Vite
• 先告诉你服务器准备完成，然后等你发送HTTP请求，然后是入口文件，Dynamic import（动态导入）code split point （代码分割）

语法差异

• vue2：一个组件需要使用Vue.component方法进行注册，并使用export default导出组件对象
• vue3：组件的导出和注册可以使用信的语法糖<script setup>，只需将组件的配置放在<script>标签中，并使用defineComponent方法导出组件对象

TypeScript

• vue2：使用TypeScript需要进行额外的配置和安装响应类型声明文件。
• vue3：对TypeScript有更好的原生支持，可以更方便地编写类型安全的代码

TypeScript简介

什么是TypeScript

TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript

为什么要用TypeScript

• 可以避免经典的错误：'undefined' is not a function
• 在不严重破坏代码的情况下，重构代码更容易
• 使大型、复杂的应用程序源码更易阅读，TypeScript代码更可靠、更容易重构
• 一项研究表明，TypeScript可以检测到所有JavaScript错误的15％
• JavaScript是TypeScript的子集，因此您可以在TypeScript代码中使用您想要的所有JavaScript库和代码

在前端还是后端使用TypeScript

TypeScript可以被编译为JavaScript，TypeScript可以在任何可以使用JavaScript的地方使用：包括前端和后端。

TypeScript的类型

TypeScript可以支持静态类型，具有多种基本类型，例如Boolean，Number，String，Array，Tuple等

api方面

vue2

• OptionsAPI在options里写data，methods，created等描述组件对象，其中生命周期、methods、data等只能定义一次，所以一个逻辑可能在不同地方，代码的内聚性低

vue3

• CompositonAPI将模块相关代码放在用一个地方处理，不需要再多个options中查找，可以多次使用一个相同的生命周期

根结点

• vue2中不能有多个根结点
• vue3支持多根结点（减少了DOM元素的嵌套层级）

生命周期

vue2	vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
befoteDestroyed	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated

key在template和v-if上的使用

• vue2：在使用v-if，v-else，v-else-if时，为了保证结点渲染的正确性，通需要在对应的结点设置不同的key；在v-for循环不能设置key
• vue3：在使用v-if，v-else，v-else-if时，不需要提供唯一的key对dom结点进行区分，因为vue内部会自动生成唯一的key，如果提供了key，就要确保他的唯一性；vue3在v-for循环时，key应该设置在标签上

双向数据绑定

vue2

• 当v-if和v-for同时使用时，父子组件在传值时想要实现v-model效果时要用到.sync修饰符实现双向绑定
• vue2中只有get和set方法去进行属性的读取和修改操作，当我们进行新增，删除时，页面不会实时更新
• 原理：利用ES5的一个API Object.definePropert()对数据进行劫持，结合，发布订阅模式来实现的

vue3

• 对v-model进行改造，不需要.sync修饰符就可以达到双向绑定的效果。支持多个v-model属性，默认使用modelValue作为prop
• Proxy可以拦截对象中任意的属性变化，当然包括读写，添加，删除等
• 原理：使用ES6的ProxyAPI对数据代理，使用window内置对象Reflect反射，Reflect对源对象属性进行操作

响应式数据

• vue2：响应式数据必须写在data中，在vue内部通过Object.defineproperty()方法以及重写Array方法来达到数据响应式的目的，无论此变量有没有改变都会在vue初始化时设置为响应式（效率差，支持性差）
• vue3：通过ref函数或reactive函数实现数据响应式，只有当你去访问改变变量时，才会被处理为响应式数据，并且不需要对数组、对象等进行特殊处理

全局API

• vue2：有很多全局API，如：Vue.directive、Vue.component、Vue.config、Vue.mixin等
• vue3：提供的是实例API，通过createApp创建vue实例，原来在Vue原型上的API都被挂载到了vue实例上，如：app.directive、app.component、app.config、app.mixin等