vue2与vue3的区别

vue2与vue3的区别

1. 生命周期函数

   vue2使用传统的生命周期钩子，如beforeCreate,created,mounted等，这些钩子可以直接在选项中调用

   vue3引用了组合是api(Conposition api),需要再引入生命周期钩子，如onMounted,onUpdated等，生命周期函数名称通常在前面加了on 前缀

2. 模板跟节点

   vue模板中只能有一个根节点，如果有多个根节点，需要有一个包裹元素包起来

   vue3支持多根节点Fragment,即模板中可以直接书写多个根节点而不会报错

3. API

   vue2使用了选项API(Options API),将数据，方法，计算属性等分散在不同的选项中，这可能导致代码逻辑分散，不易读和维护

   vue3引用了组合式API（composition API）,可以将相关的逻辑集中在一起，提高了代码的可读性和内聚行。

4. 组件

   vue2使用mixins 来实现代码的复用，但可能导致命名冲突和代码分散

   vue3通过引入hook函数，可以更灵活的复用逻辑，并保持响应式

5. 构建工具

   vue2通常使用webpack作为项目的构建工具，基于入口文件进行模块分析和打包

   vue3推荐使用vite作为构建工具，它利用ES modules 的动态导入特性，提供了更快的热更新和开发体验

6. 全局API变化

   vue2可以再组件中直接使用this.$attrs、this.$emit 等全局API

   vue3取消了一些全局API,并将部分功能移到setup()函数中，使用context对象可以访问相关属性

7. 响应式系统

   vue2 采用Object.defineProperty 来劫持数据属性

   vue3 采用了proxy 来实现响应式系统，性能更高且支持更复杂的数据结构

8. 指令

   vue2 使用v-if 和v-for时需要注意指令的优先级

   vue3 取消了v-if 和v-for 的优先级，并移除了v-on.native 修饰符

9. ts 支持

   vue2 源码使用Flow进行类型检查

   vue3源码采用typeScript 重写，对typeScript 的支持更加友好，适合现代前端项目