Vue3与Vue2区别归纳总结

Vue3与Vue2的区别归纳

1.1：底层原理的区别

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

1.2：响应式区别

Vue3使用proxy来代理所有i响应式数据
Vue2使用defineProperty来拦截响应式数据（一次只能拦截一个key，无法很好的相应数组的变化）

1.3：this指向

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

1.4：底层运行变化

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

1.5：Fragment / 模板简单化

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

1.6：语法逻辑变换

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

1.7：生命周期

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

1.8：组件通信

Vue3采用hosks方式

1.8.1 定义props及使用

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

p.key //使用

1.8.2 定义emits及使用

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

Vue2采用this

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

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

1.8.4 定义emits及使用

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

1.9：style支持动态属性

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

1.10：Teleport 任意组件传送门

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