Vue 组件的核心组成部分有哪些？

一、Vue 组件的“铁三角”：模板、脚本与样式

1. <template>：组件的骨架与视图

• 作用：声明式地描述 UI 应该长什么样。
• 特点：基于 DOM 扩展，最终会被编译为高效的 JavaScript 渲染函数。
• 示例：
  html

  预览

  1<template>
  2  <div class="user-card">
  3    <h2>{{ user.name }}</h2>
  4    <p v-if="user.isActive">在线状态</p>
  5  </div>
  6</template>

2. <script>：组件的大脑与逻辑

• 作用：管理响应式数据、处理用户交互、协调生命周期。
• 演变：从 Vue 2 的对象配置模式（Options API）进化到 Vue 3 的函数组合模式（Composition API），解决了复杂逻辑复用的痛点。

3. <style>：组件的皮肤与表现

• 作用：美化界面，控制布局。
• 特性：支持预处理器（Sass, Less）、CSS Modules 以及 scoped 属性。
  html

  预览

  1<style scoped>
  2.user-card {
  3  border: 1px solid #ddd;
  4  padding: 1rem;
  5}
  6</style>

二、核心演进：Options API vs Composition API

1. Options API（选项式 API）：经典的分层模式

• 结构：代码被分散在 data、methods、computed、watch 等固定选项中。
• 优点：结构简单，新手友好，适合小型组件。
• 痛点：当组件变得复杂时，同一个功能逻辑（例如“搜索功能”）的代码会被打散在不同的选项中，导致维护困难和逻辑复用性差。

1// Options API 示例
2export default {
3  data() {
4    return { count: 0 };
5  },
6  methods: {
7    increment() { this.count++; }
8  }
9}

2. Composition API（组合式 API）：灵活的逻辑聚合

• 核心入口：setup() 函数（或使用 <script setup> 语法糖）。
• 优势：
  • 逻辑聚合：相关的数据、方法和生命周期可以写在一起，便于阅读和维护。
  • 极致复用：通过“组合式函数”（Composables），可以轻松提取和复用逻辑，无需 mixins 的命名冲突问题。
  • 更好的 TypeScript 支持：基于函数的设计天然更适合类型推导。

1// Composition API (<script setup>) 示例
2<script setup>
3import { ref } from 'vue';
4
5const count = ref(0);
6const increment = () => count.value++;
7</script>

三、深度解析：现代 Vue 组件的关键要素

1. 响应式系统（Reactivity System）

• ref：用于定义基本类型（number, string）或对象的响应式数据。在 JS 中访问需通过 .value。
• reactive：用于定义对象的响应式代理，直接访问属性即可。

2. 生命周期钩子（Lifecycle Hooks）

• 应用场景：发起网络请求（onMounted）、清理定时器（onUnmounted）。

3. 组件通信（Component Communication）

• Props：父传子，单向数据流。
• Emits：子传父，通过 $emit 触发自定义事件。
• Provide/Inject：跨层级依赖注入，避免“props 透传”。

四、实战建议：如何构建高质量的 Vue 组件？

1. 首选 <script setup>：除非有极特殊的兼容性需求，否则应全面采用 <script setup> 语法糖，它能减少样板代码，提升执行效率。
2. 逻辑抽离（Composables）：当一个组件的逻辑超过 200 行，或者某段逻辑（如鼠标位置跟踪、表单验证）需要在多个组件使用时，立即将其抽离为独立的 Composable 函数（通常以 use 开头，如 useMouse, useForm）。
3. 类型安全：结合 TypeScript 定义 Props 和 Emits 的类型，利用 Vue 3 优秀的类型推导能力，在编码阶段规避错误。
4. 样式隔离：始终使用 scoped 或 CSS Modules，防止样式泄漏，确保组件的独立性。

结语