vue2与vue3的区别对比

vue2 是 选项式API（Option API），逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，写一个功能需要辗转各处。Vue3 组合式API（Composition API）很好地解决了这个问题，可将同一逻辑的内容写到一起，但是vue3中依然可以使用vue2 的选项式api。

这里记录一写vue3与vue2的主要差异

根节点

vue2中，组件只能有一个根节点，导致我们编写页面时经常在最外层套一个div来包裹html结构，这样就产生了多余的结构，在一些特殊场景下多包裹一层也不合适，比如在flex布局中就不能在父元素和子元素中间再包一层，vue3解决了这个问题，vue3可以多个根节点。

生命周期对比：

vue2	vue3
beforeCreate	—
created	—
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

响应式原理变更

vue2通过Object.defineProperty实现，vue3 通过Proxy函数实现。
Object.defineProperty不能直接监听数组、对象的元素变化（vue通过重写方法实现，例如数组的push、shift等）
proxy是es6特性，不兼容ie11以下浏览器，能够全面控制外部对对象的访问。

Diff性能优化

区分静态节点和动态节点，只对比动态节点，提高diff性能。

Typescript

vue3完全由ts重写，有更好的ts支持。

持续更新....