标签: TypeScript

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 进阶特性与性能优化

经过基础知识的学习，是时候深入 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 分钟