vue2和vue3的区别（Vue3升级部分）

区别有两个目的：一面试说一下书面化的表达，二工作需要升级大白话说一下项目应用的区别。

双向数据绑定：

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持 结合 发布订阅（getter&setter）模式的⽅式来实现的。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理，使⽤ref或者reactive将数据转化为响应式数据，从⽽ 实现对数据的监控。

 应用就是：2中监听数据是单层的，有些数组，对象内部变化存在监听不到，对某些修改需要用$set强刷新赋值；3中不需要了类似可以实现内部监听。

实例化main.js：

2中new出的实例对象，所有的东西都在这个vue对象上，template里必须要有一个根元素，是否都会跑⼀遍，性能消耗大。

3按需导出了一个createApp 中，template里不要求只有一个根元素，可以⽤ES module imports按需引⼊，如：keep-alive内置组件、v-model指令，减少 了内存消耗。

生命周期：

beforeCreate -> setup()

created ->  setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

3中使用setup语法糖即可直接写，各个生命周期意思不做赘述

数据和方法的定义：

2使⽤的是选项类型API（Options API）【在代码中分割不同属性：data，computed，methods等】：data() { return {}; }, methods:{ }

3使⽤的是合成型API（Composition API）：setup中定义函数和属性，统一return{}

父子间传参（props&emits）：

2中this.props获取，this.$emit使用，

3中setup中setup(props,context){context.emit()，props}两个参数获取，setup语法糖如下

<script lang="ts" setup>
1...prop定义使用
//interface 定义
interface Props {
	show: boolean
	isUpdate: boolean
	title?: string
	width?: string
}
//withDefaults赋予初始数据
const props = withDefaults(defineProps<Props>(), {
	show: false,
	isUpdate: false,
	width: "800px"
})

2...子向父暴露可用函数
//子组件
defineExpose({函数名逗号隔开})
//父组件
<keep-alive>
	<component :is="part" v-show="part" :show="showRef" ref="componentRef"></component>
</keep-alive>
componentRef.value?.函数名()

3...子组件emit
//定义
const emits = defineEmits(["handle1", "handle2", ...])
//调用
emits("handle1",参数)

指令和插槽的使用不同

2中不建议将v-for和v-if写在一起使用，允许直接使用slot

3中将v-if当作v-for大的一个判断语句，不会相互冲突；移除keyCode作为v-on的修饰符，不支持config.keyCodes；移除v-on.native修饰符；移除过滤器filter；不允许直接使用slot，正确格式为 v-slot

其他使用区别继续更新，setup语法糖还是比较好用的，建议直接走项目学习比较好