Vue2与Vue3之间到底有哪些区别？

Vue2与Vue3之间的区别，这里简单记录一下。

双向绑定原理

Vue2的双向绑定利用了Object.defineProperty()进行数据劫持，结合发布订阅模式实现。

Vue3中使用ES6 Proxy，其优势在于可以监听整个对象而不是单单某个属性，直接绑定整个对象可以省去for in，闭包等辅助类的东西从而提升效率。此外，它可以监听数组内部数据的变化。

定义方法

Vue3提供了一种全新的Composition API以代替Vue2的Option API，并提供了script-setup语法糖简化Composition API的写法，但同时兼容Vue2写法。

（在Vueconf 2021大会上，看到尤大现场展示script-setup的语法，真的当场直呼惊艳）

Composition API使用的地方在setup回调函数中，这个回调函数是创建组件之前执行，由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，将无法访问组件中声明的任何属性，比如本地状态、计算属性或方法。

生命周期钩子函数

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

全局绑定

对于一些第三方插件，vue2中通常使用prototype原型来挂载到vue对象中。

Vue3没有直接在Vue实例中暴露prototype，而是提供了一个名为globalProperties的全局属性配置，可以代替vue2中的prototype

事件

vue3中去除了 $on、$off、$once、三种方法，仅保留$emit。

其他

Vue3新增对TS和PWA的支持

未完待续

打赏