Vue 2 转移到 Vue 3 清单

1. 新的响应式系统

• 理解 Vue 3 中基于 Proxy 的响应式系统，取代了 Vue 2 中的 Object.defineProperty。
• 如何使用 ref 和 reactive 创建响应式数据。

2. Composition API

• Composition API 的使用，包括 setup 函数、响应式状态管理、计算属性、生命周期钩子等。
• 对比 Option API 和 Composition API 的优缺点，并了解何时使用。

3. 更新项目构建工具

• 迁移到 Vite 或更新 Vue CLI 到 4.x 版本，以支持 Vue 3 项目。
• 如何配置新的构建工具，包括环境变量、插件和负载器。

4. 适应新的生命周期钩子

• Vue 3 中生命周期钩子的变化，如 onBeforeMount、onMounted 等，并更新现有代码。

5. 使用 TypeScript 进行开发

• 如果项目使用 TypeScript，如何迁移到 Vue 3 的 TypeScript 支持，包括类型声明和配置。

6. 更新第三方插件和库

• 检查并更新项目中使用的第三方插件和库，确保它们与 Vue 3 兼容。

7. 学习新的组件通信方式

• 了解 provide 和 inject 的使用，以及如何在组件间传递数据。

8. 适应新的模板语法

• Vue 3 模板语法的变化，如片段（Fragments）和多根节点模板。

9. 熟悉新的组件结构

• 如何创建没有单一根元素的组件，以及如何使用 <script setup> 语法。

10. 实践和迁移现有项目

• 通过创建新的 Vue 3 项目或迁移现有项目来实践新的内容，解决迁移过程中遇到的问题。

注意事项：

• 在迁移过程中，注意检查官方文档中的迁移指南和更新日志，以确保正确应用新的 API 和最佳实践。
• 使用自动化工具可以加速迁移过程，但需要注意审查自动生成的代码，以确保代码质量和性能。
• 进行充分的测试以确保迁移后的应用稳定性和功能正确性。
• 关注社区讨论和最佳实践，以利用其他开发者的经验和解决方案。

Vue 3 中的 ref 和 reactive 有什么区别？

Vue 3 中的 ref 和 reactive 区别

Vue 3 提供了两种主要的响应式数据管理方法：ref 和 reactive。它们在处理数据类型、返回值类型、访问方式以及原始对象的可变性方面有所不同。

数据类型和返回值类型

• ref 主要用于创建响应式的基本数据类型，如数字、字符串和布尔值。它返回一个包装了原始数据的响应式对象，该对象具有 .value 属性来访问和修改数据.
• reactive 用于创建响应式的复杂数据类型，如对象和数组。它返回一个原始数据的代理对象，该代理对象的属性可以直接访问和修改，无需使用 .value 属性.

访问方式

• 使用 ref 创建的响应式数据需要通过 .value 属性来访问和修改其值.
• 使用 reactive 创建的响应式数据可以直接通过点符号 . 来访问和修改其属性.

原始对象的可变性

• ref 通过一个 RefImpl 实例持有原始数据，可以通过 .value 为 ref 重新分配数据，而不会破坏响应式.
• reactive 返回的是原始对象的代理，不能对其重新分配对象，只能通过属性访问修改属性值，否则会破坏响应式.

在选择使用 ref 还是 reactive 时，应根据数据的类型和具体需求来决定。对于基本数据类型或单一对象，ref 可能是更合适的选择。而对于复杂的数据结构，如对象和数组，reactive 提供了更自然的访问和修改方式.

为什么要用 Vite 而不是 Vue CLI 作为 Vue 3 项目的构建工具？

Vite相对于Vue CLI的优势

Vite作为Vue 3项目的构建工具，相较于Vue CLI，提供了更快的开发环境和更高效的构建流程。以下是Vite相对于Vue CLI的几个关键优势：

1. 快速的冷启动和热模块更新（HMR）：Vite在开发过程中不需要打包，直接提供原生ES模块给浏览器，从而实现几乎即时的热更新和快速初始化。这使得开发体验非常流畅，尤其是在大型项目中。

2. 按需编译：Vite采用按需编译的方式，只编译当前页面实际导入的代码，而不是等待整个应用程序编译完成。这大大减少了等待时间，尤其是在有大量模块的应用中。

3. 简单的配置：Vite的配置相对简单，大多数配置可以在一个单独的配置文件中完成，鼓励使用插件来扩展功能，这使得项目设置更加轻量和易于管理。

4. 生产环境构建：尽管Vite在开发时不进行打包，但它提供了一个vite build命令，可以在生产环境中将项目构建为静态文件，以便传统服务器托管。

5. 现代构建工具的优势：Vite利用了现代浏览器的原生ES模块支持，以及Rollup进行生产环境的打包，这些都是构建工具领域的先进技术，有助于优化项目的构建输出。

6. 社区和生态系统的支持：虽然Vite相对较新，但它已经获得了社区的支持，并且有专门的插件和资源可用，这有助于解决开发中遇到的问题和集成第三方库。

综上所述，Vite的设计理念和技术实现为Vue 3项目提供了一个更快、更简洁的开发和构建流程，这是选择Vite作为Vue 3项目构建工具的主要理由。

Vue 3 的生命周期钩子相比于 Vue 2 有哪些新增和修改？

Vue 3 生命周期钩子的新增和修改

Vue 3 在生命周期钩子方面进行了一些调整和优化，主要体现在以下几个方面：

1. 生命周期钩子名称的变更：

   • beforeDestroy 被重命名为 beforeUnmount。
   • destroyed 被重命名为 unmounted。

2. 组合式 API 中的生命周期钩子：

   • Vue 3 引入了 Composition API，在 setup 函数中可以使用生命周期钩子，如 onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted 等。

3. 新增的生命周期钩子：

   • onActivated 和 onDeactivated：用于被 <keep-alive> 缓存的组件的激活和停用状态。
   • onErrorCaptured：当捕获到后代组件错误时被调用。
   • onRenderTracked 和 onRenderTriggered：用于调试，分别在组件的依赖项被追踪和重新渲染被触发时调用。

4. 生命周期钩子的执行顺序：

   • 在组合式 API 中，生命周期钩子的执行顺序与选项式 API 有所不同，它们会在相应的生命周期阶段被调用。

5. 向后兼容性：

   • Vue 3 保留了 Vue 2 中的生命周期钩子，以确保向后兼容性。

以上改动旨在提供更清晰的生命周期管理和更灵活的组件组织方式，同时也增加了对调试和服务端渲染场景的支持。