标签: Vue3

从 Vue2 迁移到 Vue3，就像从功能机换到智能机。虽然基本操作相似，但底层架构和使用体验都有了质的飞跃。本文将带你全面认识 Vue3，从环境搭建到核心概念，开启 Vue3 开发之旅。

Vue3 带来了什么？

相比 Vue2 的主要改进

特性	Vue2	Vue3
响应式系统	Object.defineProperty	Proxy
API 风格	Options API	Composition API + Options API
TypeScript	需要额外配置	原生支持
性能	优秀	更优秀（体积更小、渲染更快）
Tree-shaking	部分支持	完全支持
多根节点	不支持	支持（Fragment）

HSXISAWD2026/3/20大约 9 分钟

Vue3 组件开发与通信

Vue3 的组件系统在保持简洁的同时变得更加强大。无论你是用 Options API 还是 Composition API，组件化开发的核心理念是一致的。本文将全面介绍 Vue3 中的组件开发与通信方式。

组件定义方式

Options API（传统方式）

<template>
  <div class="user-card">
    <h3>{{ fullName }}</h3>
    <p>{{ user.email }}</p>
    <button @click="handleClick">联系</button>
  </div>
</template>

<script>
export default {
  name: "UserCard",

  props: {
    user: {
      type: Object,
      required: true,
    },
  },

  emits: ["contact"],

  data() {
    return {
      isLoading: false,
    };
  },

  computed: {
    fullName() {
      return `${this.user.firstName} ${this.user.lastName}`;
    },
  },

  methods: {
    handleClick() {
      this.$emit("contact", this.user);
    },
  },
};
</script>

HSXISAWD2026/3/20大约 8 分钟

Vue3 Composition API

Composition API 是 Vue3 最具革命性的特性。它不仅仅是一种新的写法，更是一种全新的代码组织和复用方式。本文将深入探讨 Composition API 的方方面面，帮你掌握这一强大工具。

为什么需要 Composition API？

Options API 的痛点

// Options API：相关逻辑被强制分散
export default {
  data() {
    return {
      // 功能 A 的数据
      userList: [],
      userLoading: false,

      // 功能 B 的数据
      searchQuery: "",
      searchResults: [],
    };
  },
  computed: {
    // 功能 A 的计算属性
    activeUsers() {
      /* ... */
    },

    // 功能 B 的计算属性
    filteredResults() {
      /* ... */
    },
  },
  methods: {
    // 功能 A 的方法
    fetchUsers() {
      /* ... */
    },
    deleteUser() {
      /* ... */
    },

    // 功能 B 的方法
    search() {
      /* ... */
    },
    clearSearch() {
      /* ... */
    },
  },
  mounted() {
    // 功能 A 的初始化
    this.fetchUsers();
    // 功能 B 的初始化
    this.initSearch();
  },
};

HSXISAWD2026/3/20大约 8 分钟

Vue3 进阶特性与性能优化

经过基础知识的学习，是时候深入 Vue3 的进阶特性了。本文将探讨 Vue3 的高级用法、响应式原理、TypeScript 集成以及性能优化策略，帮你写出更专业的 Vue3 应用。

Vue3 响应式原理

Proxy vs Object.defineProperty

// Vue2：Object.defineProperty
// 缺点：无法检测属性添加/删除、数组索引变化

// Vue3：Proxy
// 优点：可以代理整个对象，拦截所有操作
const obj = { name: "张三" };

const proxy = new Proxy(obj, {
  get(target, key, receiver) {
    console.log(`读取 ${key}`);
    track(target, key); // 依赖收集
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`设置 ${key} = ${value}`);
    const result = Reflect.set(target, key, value, receiver);
    trigger(target, key); // 触发更新
    return result;
  },
  deleteProperty(target, key) {
    console.log(`删除 ${key}`);
    const result = Reflect.deleteProperty(target, key);
    trigger(target, key);
    return result;
  },
});

HSXISAWD2026/3/20大约 8 分钟