Vue3学习笔记

一、Vue3 简介

Vue3 是 Vue.js 的第三个主要版本，发布于2020年9月。相较于 Vue2，它带来了以下核心改进：

1. 性能优化：更快的渲染速度（虚拟 DOM 重写）、更小的打包体积（Tree-shaking 支持）。
2. Composition API：提供更灵活的代码组织方式，解决复杂组件逻辑复用问题。
3. TypeScript 支持：源码使用 TypeScript 重写，提供完善的类型推断。
4. 新特性：Teleport（传送门）、Suspense（异步组件）、Fragment（多根节点组件）等。

---

二、核心特性详解

1. Composition API

解决的问题：Options API 在复杂组件中逻辑分散（data、methods、生命周期分离）。

javascript

复制

import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    // 响应式数据
    const count = ref(0); // 基础类型
    const state = reactive({ name: 'Vue3' }); // 引用类型

    // 计算属性
    const doubleCount = computed(() => count.value * 2);

    // 方法
    const increment = () => count.value++;

    return { count, state, doubleCount, increment };
  }
}

2. 响应式系统重构

• Proxy 替代 Object.defineProperty：支持数组和对象深层监听，解决 Vue2 中无法检测属性新增的问题。

• Ref 与 Reactive：

  • ref：处理基本类型（自动包装为 { value: ... }），模板中自动解包。
  • reactive：处理对象/数组，通过 Proxy 代理。

3. 生命周期变化

Vue2 生命周期	Vue3 对应钩子
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

---

三、基本用法

1. 创建应用实例

javascript

复制

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

2. 模板语法

• 指令增强：

  • v-model 支持多个绑定（如 v-model:title="pageTitle"）。
  • v-for 支持遍历对象时获取 key 和 index。

• 片段支持：组件可包含多个根节点。

3. 组件通信

• Props / Emits：

  javascript

  复制

  // 子组件
  export default {
    props: ['title'],
    emits: ['updateTitle'],
    setup(props, { emit }) {
      const handleClick = () => emit('updateTitle', 'New Title');
    }
  }
  

• Provide / Inject：跨层级传递数据。

  javascript

  复制

  // 祖先组件
  import { provide } from 'vue';
  provide('theme', 'dark');
  
  // 后代组件
  import { inject } from 'vue';
  const theme = inject('theme', 'light'); // 默认值
  

---

四、进阶内容

1. 自定义 Hooks

封装可复用的逻辑（类似 React Hooks）：

javascript

复制

// useCounter.js
import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);
  const increment = () => count.value++;
  return { count, increment };
}

// 组件中使用
import { useCounter } from './useCounter';
const { count, increment } = useCounter(10);

2. Teleport 组件

将内容渲染到 DOM 的任意位置（如模态框）：

html

复制

<teleport to="body">
  <div class="modal">内容</div>
</teleport>

运行 HTML

3. Suspense 组件

处理异步组件加载状态：

html

复制

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

运行 HTML

---

五、生态与工具

1. Vue Router 4：支持 Vue3 的路由库。
2. Pinia：推荐的状态管理库（替代 Vuex）。
3. Vite：新一代构建工具，秒级启动速度。

---

六、总结

Vue3 通过 Composition API 提升了代码组织能力，通过 Proxy 实现更强大的响应式系统，同时保持渐进式框架的特性。学习路径建议：

1. 掌握基础语法和响应式原理
2. 熟练使用 Composition API
3. 结合 TypeScript 开发
4. 通过实战项目（如后台管理系统）巩固知识