vue3新手快速入门_vue3中文官网-优快云博客

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 等），使代码更具逻辑性和可复用性：
- 按功能组织代码，而非选项。
- 解决大型组件逻辑复用和代码组织问题。

更好的 TypeScript 支持。

<!-- Vue2 选项式 API -->
export default {
  data() {
    return { count: 0 };
  },
  methods: { increment() { this.count++; } },
  mounted() { console.log('Mounted'); }
};

<!-- Vue3 组合式 API -->
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0);
const increment = () => count.value++;
onMounted(() => console.log('Mounted'));
</script>

3. 组件生命周期

Vue2：生命周期钩子（如 created、mounted 等）直接在选项中定义。
Vue3：组合式 API 提供等效钩子，需从 vue 导入：
- beforeCreate → setup()
- created → setup()
- beforeMount → onBeforeMount
- mounted → onMounted

以此类推。

// Vue3 生命周期使用
import { onMounted } from 'vue';

setup() {
  onMounted(() => {
    console.log('Component mounted');
  });
}

4. 多根节点组件（Fragment）

Vue2：组件必须有单个根节点。

Vue3：支持多根节点组件（Fragment），无需额外包裹元素。

<!-- Vue3 多根节点组件 -->
<template>
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</template>

5. 性能优化

Vue3：
- 编译时优化（PatchFlag）：标记动态节点，减少不必要的 DOM 比较。
- 更轻量的运行时（体积减少 41%）。
- 更快的渲染和更新速度。

6. TypeScript 支持

7. 全局 API 重构

Vue2：对 TypeScript 支持有限，需额外插件（如 vue-class-component）。
Vue3：原生支持 TypeScript，组合式 API 与 TypeScript 无缝集成。
Vue2：全局 API（如 Vue.filter、Vue.directive）挂载在全局 Vue 实例上。
Vue3：创建应用实例时进行局部配置，避免全局污染。

// Vue2 全局配置
import Vue from 'vue';
Vue.filter('formatDate', () => {});

// Vue3 局部配置
import { createApp } from 'vue';
const app = createApp(App);
app.config.globalProperties.$filters = { formatDate: () => {} };

8. 其他变化

Teleport：内置组件，用于将内容渲染到 DOM 的其他位置（如模态框）。
Suspense：异步组件加载的内置支持。
Emits 选项：明确声明组件触发的事件，增强类型检查。

特性 Vue2 Vue3
响应式原理 Object.defineProperty() Proxy
API 风格选项式 API 组合式 API
多根节点不支持支持
TypeScript 支持有限原生支持
性能一般显著提升
全局 API 全局挂载局部配置

特性	Vue2	Vue3
响应式原理	Object.defineProperty()	Proxy
API 风格	选项式 API	组合式 API
多根节点	不支持	支持
TypeScript 支持	有限	原生支持
性能	一般	显著提升
全局 API	全局挂载	局部配置

二、整体认识vue3项目

1、创建vue3工程

准备工作：安装nodeJS。nodeJS版本18.0以上。

使用官方提供的创建vue工程

#下载官方提供的框架
npm create vue@latest
yarn create vue

#根据实际需求选择启用相关组件
Vue.js - The Progressive JavaScript Framowork
请输入项目名称：-myvue
请输入包名称：-myvue
是否使用TypeScript语法？-否/是  #是
是否引入Vue Router 进行单页面应用开发？ 否/是
是否引用pinia用于状态管理？ 否/是
是否引用vitest用于单元测试？否/是
是否要引入一款端到端（end to end）测试工具？不需要
是否引用ESLint用于代码质量检测？否/是 #是
是否引入Prettier用于代码格式化？ 否/是
Add  Vue DevTools extentsion for debugging? (experimental) 否/是
 
#启动项目
npm install yarn -g
cd myvue(名字可以自取)
yarn
npm run dev  或者 yarn dev