Vue3和Vue2有哪些区别

Vue3和Vue2有哪些区别

引入了tree-shaking, 构建时可以更轻松地剔除没有使用的代码。使得整体体积变小引入了 Composition API，使得组件的逻辑更容易组织和复用。

Vue 3 对 TypeScript 提供更好的支持，包括更准确的类型推断和更丰富的类型定义。

使用 Proxy 替代 Object.defineProperty，提高了响应式系统的性能。

源码组织方式变化：使用 TS 重写

支持 Composition API：基于函数的API，更加灵活组织组件逻辑（vue2用的是options api）

响应式系统提升：Vue3中响应式数据原理改成proxy，可监听动态新增删除属性，以及数组变化

编译优化：vue2通过标记静态根节点优化diff，Vue3 标记和提升所有静态根节点，diff的时候只需要对比动态节点内容

打包体积优化：移除了一些不常用的api（inline-template、filter）

生命周期的变化：使用setup代替了之前的beforeCreate和created

Vue3 的 template 模板支持多个根标签

Vuex状态管理：创建实例的方式改变,Vue2为new Store , Vue3为createStore

Route 获取页面实例与路由信息：vue2通过this获取router实例，vue3通过使用 getCurrentInstance/ userRoute 和userRouter方法获取当前组件实例

Props 的使用变化：vue2 通过 this 获取 props 里面的内容，vue3 直接通过 props

父子组件传值：vue3 在向父组件传回数据时，如使用的自定义名称，如 backData，则需要在 emits 中定义一下

为什么使用Proxy替换defineProperty

使用 Object.defineProperty 可以拦截对数组元素的读写操作，但无法直接监测数组索引的变化，也无法监测 length 属性的变化。因此，通过直接修改数组索引或 length 属性时，不会触发响应式更新。

Object.defineProperty 仅能拦截 get 和 set 操作。这也使得defineProperty无法劫持到对一个对象的删除和添加属性操作。

还有一个问题是，如果存在深层的嵌套对象关系，需要深层的进行监听，在性能上存在一定的开销。

总结来说就是下面几点：

无法监听到数组方法添加或删除元素并不会触发属性的 get 或 set 操作，也无法监听。

Object.defineProperty 在处理嵌套对象时需要递归观察，有性能问题。

而Vue 3 中引入了 Proxy，提供了丰富的拦截操作，包括 get、set、has、deleteProperty 等，可以直接劫持整个对象，轻松地实现递归观察整个对象树的变化，也可以更准确地拦截数组的变化。

React

基础语法层面