Vue2转Vue3看这一片就够了！

一、Vue3初体验

1.1 Vue3与Vue2的语法区别

​ 由于选项式API——Vue2的代码是按区域去划分代码块的，比如：methods方法区域，computed计算区域，watch观察区域。但是由于代码量增加，Vue2的情况下写的代码数据与逻辑并不能很好的归并到一起，为增加代码的可读性，所以我们使用组合式API——Vue3代替。

二、语法区别

1.1 setup

• setup()在组件被创建之前执行，这里不需要使用this，this不会指向实例。
• 在vue3中舍弃了**beforeCreate()与created()方法，在这两个方法内写的方法都可以在setup()**中执行。
• setup()会将内部的参数通过【return】暴露给其他组件。
• 通过【ref】可以实现响应式变量
• 通过【reactive】可以实现响应式对象
• 通过【…】解构出来的数据不具备响应式，但是我们可以通过【toRefs】把它变成响应式

1.1.1 props与context

子组件

1.2 watch

• 需要导入【watch,watchEffect】方法
• 【watch】：watch(侦听响应式引用，回调函数)，只能监听指定的属性
• 【watchEffect】：对象类型深度监听，自动收集方法内需要监听的变量。

1.3 computed

• 【computed】会返回一个方法对象

1.4 provide 与 inject

• provide 用于传递数据
• **inject **用于接收数据

父组件

子组件

三、生命周期

1.1 Vue2 与Vue3生命周期对比

周期	Vue2	Vue3
实例创建开始	beforeCreate	没有，setup代替了
实例创建完成	created	没有，setup代替了
方法创建开始	beforeMount	onBeforeMount
方法创建完成	mounted	onMounted
页面更新开始	beforeUpdate	onBeforeUpdate
页面更新完成	updated	onUpdated
组件卸载开始	beforeUnmount	onBeforeUnmount
组件卸载结束	unmounted	onUnmounted
错误捕获	errorCaptured	onErrorCaptured
追踪到响应式依赖	renderTracked	onRenderTracked
变更触发了组件渲染	renderTriggered	onRenderTriggered
组件被插入到 DOM	activated	onActivated
组件从 DOM 中被移除	deactivated	onDeactivated
组件实例在服务器上被渲		onServerPrefetch

1.2生命周期使用示例

• 钩子使用需要引入。
• 可以分多个区域，多次执行生命周期函数。

四、Vu3语法糖

在setup里面写代码需要引入并暴露变量、方法，使用起来比较麻烦，这里我们使用****标记，代码可以简介很多。

示例：

父组件

子组件