Vue2和Vue3区别

1：底层原理的区别

Vue3完整支持TS，Vue3底层代码大多数（90%）都采用ts进行架构
Vue2不支持TS

2.组件通信

Vue3采用hooks方式

定义props及使用

const p = defineProps({
    key:{约束}
})

p.key //使用

定义emits及使用

const $emit = defineEmits(['事件1','事件2'])
$emit('事件1'，参数)

Vue2采用this

定义props及使用（Vue2所有的props接收到就会挂载到this上）

props：{
    key:{约束}
}
this.key //使用

定义emits及使用

this.$emit('自定义事件'，参数)

style支持动态属性

.box{
    color：v-bind(mycolor) //基础响应数据
    color：v-bind('mycolor.color') //引用响应数据
}

Teleport 任意组件传送门
Vue3独有 可以把Teleport标签，添加到HTML的任意元素中

3.生命周期

Vue3采用setup进行数据初始化（setup 相当于 beforeCreate + created）
其他生命周期采用hosks方式 onMounted() onUpdated() onUnmounted()
Vue2采用 create mount update destory

4.语法逻辑变换

Vue3 compositionAPI（组合式API），逻辑更为紧密（setup）
Vue2 选项式API。所有逻辑独立放在自己的标签内

5.Fragment / 模板简单化

Vue3 采用了虚拟父级，可以多个根节点
Vue 只支持1个根节点

6.底层运行变化

Vue3底层代码完全重构，所以在Vue3中 v-if的优先级比v-for高
Vue2 v-for优先级高于v-if

7.this指向

Vue3采用compositionAPI，所有代码逻辑放在settup作用域中，完全去掉this
Vue2采用this访问自身挂在的所有属性、方法、函数等