vue3新手快速入门

目录

1. 响应式系统

2. 组合式 API (Composition API)

3. 组件生命周期

4. 多根节点组件（Fragment）

5. 性能优化

6.TypeScript 支持

7. 全局 API 重构

8. 其他变化

9.创建并启动vue3工程项目

---

vue3简介

官网地址：https://vuejs.org/。中文官网：https://cn.vuejs.org/

vue是什么？易学易用，性能出色，适用于场景丰富的web前端框架

vue3新特性：组合式API（重点），更好的支持typescript（熟悉），状态存储框架pinia（重点），新组件（了解）

一、vue2和vue3区别

Vue3 是 Vue2 的升级版本，在性能、语法和架构等方面都有显著改进。以下是它们的主要区别：

1. 响应式系统

• Vue2：基于 Object.defineProperty()，需要递归遍历对象属性，存在以下限制：
  • 无法检测对象属性的添加或删除（需使用 Vue.set/Vue.delete）。
  • 数组通过拦截变异方法实现响应式，但直接修改索引或长度无效。
• Vue3：使用 ES6 Proxy，解决了上述问题：
  • 可以检测对象属性的添加和删除。
  • 对数组的所有操作都能触发响应式更新。
• 性能更好，初始化时无需深度遍历。

  // Vue2 响应式限制
  const obj = { count: 0 };
  obj.newProp = 1; // 非响应式
  Vue.set(obj, 'newProp', 1); // 手动添加响应式属性
  
  // Vue3 自动响应式
  const obj = reactive({ count: 0 });
  obj.newProp = 1; // 自动响应式

  2. 组合式 API (Composition API)

• Vue2：主要依赖选项式 API（data、methods、computed 等），导致复杂组件代码碎片化（例如，相关逻辑分散在不同选项中）。
• Vue3：引入组合式 API（setup()、ref、reactive 等），使代码更具逻辑性和可复用性：