首页
/ 正文

vue3 component（超详细）

更新时间: 2025-03-17 23:21:29

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在现代前端开发领域，Vue.js 已经成为构建用户界面的主流框架之一。Vue 3 的推出不仅带来了性能的显著提升，更通过全新的 Composition API 和响应式系统，重新定义了组件化开发的实践方式。对于编程初学者而言，理解 vue3 component 的核心概念和使用技巧，是迈向高效开发的第一步；而对中级开发者来说，深入探索其高级特性与优化策略，则能进一步提升代码的可维护性和扩展性。本文将从基础到进阶，结合实际案例，带您全面掌握 Vue 3 组件的开发逻辑与应用场景。

一、Vue 3 组件的基本概念与创建方式

1.1 什么是组件？

在 Vue 3 中，component（组件）可以类比为乐高积木中的单个模块：它封装了特定功能的 HTML 模板、JavaScript 逻辑和样式，通过组合不同组件，开发者能够快速构建复杂的用户界面。例如，一个按钮组件可以包含点击事件、文本内容和样式，而复用该组件时只需调整传入的参数即可。

1.2 组件的创建与注册

基础语法

Vue 3 提供了两种定义组件的方式：

函数式组件（Functional Component）：通过 h 函数（Vue 的虚拟 DOM 构造函数）创建。
选项式组件（Options API）或 组合式组件（Composition API）：通过 defineComponent 或 setup 函数定义。

以下是一个使用 Composition API 的简单组件示例：

import { defineComponent, ref } from 'vue';  

export default defineComponent({  
  name: 'CounterButton',  
  setup() {  
    const count = ref(0);  
    const increment = () => count.value++;  
    return { count, increment };  
  },  
  template: `<button @click="increment">点击次数：{{ count }}</button>`  
});

组件注册与使用

组件定义后，需通过 app.component 全局注册或在父组件中局部注册：

// 全局注册示例  
const app = createApp({});  
app.component('CounterButton', CounterButton);  

// 局部注册示例（在父组件中）  
export default {  
  components: {  
    CounterButton  
  }  
};

1.3 模板语法基础

Vue 3 的模板语法允许在 HTML 中直接使用指令（如 v-if、v-for）和表达式（如 {{ }}）。例如，以下代码通过 v-bind 绑定动态属性：

<!-- 组件模板示例 -->  
<div :class="{ active: isActive }">动态样式</div>

二、组件间通信与数据流管理

2.1 Props：父组件向子组件传递数据

Props 是父组件向子组件单向传递数据的核心机制。通过定义 props 选项，子组件可以接收并使用父组件传入的值。

示例：父组件传递文本内容

// 父组件模板  
<MyComponent :message="parentMessage" />  

// 子组件定义  
export default {  
  props: {  
    message: {  
      type: String,  
      required: true  
    }  
  }  
};

Props 的验证与默认值

Vue 3 支持通过 validator 函数对 Props 的值进行验证，并通过 default 设置默认值：

props: {  
  count: {  
    type: Number,  
    default: 0,  
    validator: (value) => value >= 0  
  }  
}

2.2 事件：子组件向父组件传递消息

当子组件需要触发父组件的行为时，可通过 $emit 触发自定义事件。例如：

// 子组件  
export default {  
  methods: {  
    handleEvent() {  
      this.$emit('custom-event', '来自子组件的消息');  
    }  
  }  
};  

// 父组件模板  
<MyComponent @custom-event="handleParentMethod" />

2.3 状态管理：跨越组件的复杂场景

对于多层级组件或跨组件的状态共享，建议使用 Vuex 4 或 Pinia 状态管理库。例如，通过 Pinia 定义一个计数器 store：

// stores/counterStore.js  
import { defineStore } from 'pinia';  

export const useCounterStore = defineStore('counter', {  
  state: () => ({ count: 0 }),  
  actions: {  
    increment() { this.count++ }  
  }  
});

三、Vue 3 组件的高级特性

3.1 Composition API：代码逻辑的重组

Vue 3 的 Composition API 通过 setup() 函数和 ref、reactive 等 API，将逻辑按功能而非生命周期重组，尤其适合大型项目。例如，将计数器逻辑提取为一个可复用的组合式函数：

// 使用组合式函数  
function useCounter() {  
  const count = ref(0);  
  const increment = () => count.value++;  
  return { count, increment };  
}  

export default {  
  setup() {  
    const { count, increment } = useCounter();  
    return { count, increment };  
  }  
};

3.2 模板函数与渲染策略

Vue 3 引入了 v-once 和 v-memo 指令，用于优化渲染性能：

v-once：仅渲染一次，后续更新不触发重渲染。
v-memo：根据依赖项变化决定是否重新渲染组件。

<!-- 示例：使用 v-memo 控制渲染 -->  
<ChildComponent v-memo="[propA, propB]" :propA="valueA" :propB="valueB" />

3.3 自定义渲染函数：深度控制 UI

通过 h 函数（即 createVNode），开发者可直接操作虚拟 DOM 节点，实现高度灵活的渲染逻辑：

import { h } from 'vue';  

export default {  
  setup() {  
    return () => h('div', { class: 'custom-class' }, '动态生成的内容');  
  }  
};

四、实践案例：构建一个可复用的 Todo List 组件

4.1 组件设计与功能拆分

我们将构建一个包含以下功能的 Todo List：

添加待办事项
标记完成状态
删除操作
数据持久化（本地存储）

组件结构

components/  
├── TodoList.vue  // 主组件，管理列表与状态  
├── TodoItem.vue  // 子组件，渲染单个待办项  
└── AddTodo.vue   // 子组件，添加新待办

4.2 核心代码实现

主组件 `TodoList.vue`

<template>  
  <div>  
    <AddTodo @add-todo="addTodo" />  
    <div v-if="todos.length === 0">暂无待办事项</div>  
    <TodoItem  
      v-for="todo in filteredTodos"  
      :key="todo.id"  
      :todo="todo"  
      @toggle="toggleTodo"  
      @delete="deleteTodo"  
    />  
  </div>  
</template>  

<script setup>  
import { ref, computed } from 'vue';  
import TodoItem from './TodoItem.vue';  
import AddTodo from './AddTodo.vue';  

const todos = ref([]);  

// 过滤完成状态的待办  
const filteredTodos = computed(() => {  
  // 这里可添加筛选逻辑，如只显示未完成项  
  return todos.value;  
});  

const addTodo = (text) => {  
  todos.value.push({  
    id: Date.now(),  
    text,  
    completed: false  
  });  
};  

const toggleTodo = (id) => {  
  const todo = todos.value.find(t => t.id === id);  
  todo.completed = !todo.completed;  
};  

const deleteTodo = (id) => {  
  todos.value = todos.value.filter(t => t.id !== id);  
};  
</script>

子组件 `TodoItem.vue`

<template>  
  <div :class="{ completed: todo.completed }">  
    <input  
      type="checkbox"  
      :checked="todo.completed"  
      @change="$emit('toggle', todo.id)"  
    />  
    <span>{{ todo.text }}</span>  
    <button @click="$emit('delete', todo.id)">删除</button>  
  </div>  
</template>  

<script setup>  
const props = defineProps({  
  todo: {  
    type: Object,  
    required: true  
  }  
});  
</script>

4.3 优化与扩展

数据持久化：通过 localStorage 保存 todos 到本地：

// 在 TodoList.vue 的 setup() 中  
const saveTodos = () => {  
  localStorage.setItem('todos', JSON.stringify(todos.value));  
};  

// 监听 todos 的变化  
watch(todos, saveTodos, { deep: true });  

// 初始化时读取数据  
onMounted(() => {  
  const storedTodos = localStorage.getItem('todos');  
  if (storedTodos) todos.value = JSON.parse(storedTodos);  
});

样式优化：通过 CSS 变量实现主题切换：

:root {  
  --todo-text-color: #333;  
  --completed-opacity: 0.5;  
}  

.completed {  
  opacity: var(--completed-opacity);  
  text-decoration: line-through;  
}

五、组件性能优化与最佳实践

5.1 减少不必要的渲染

使用 v-once：对静态内容使用 v-once 指令，避免重复渲染。
优化 v-for：在 v-for 中添加 key 属性，帮助 Vue 跟踪元素变化。

5.2 异步组件与懒加载

通过 defineAsyncComponent 实现组件的按需加载，减少初始加载时间：

const LazyComponent = defineAsyncComponent(() =>  
  import('./HeavyComponent.vue')  
);

5.3 开发工具与调试

Vue Devtools：通过浏览器插件实时调试组件状态与响应式数据。

TypeScript 支持：为组件添加类型定义，提升代码健壮性：

interface Props {  
  message: string;  
  count: number;  
}  

const props = withDefaults(defineProps<Props>(), {  
  count: 0  
});

六、结论

通过本文的讲解，您已掌握了从基础到高级的 vue3 component 开发技巧，包括组件通信、状态管理、性能优化等关键知识点。无论是构建简单的按钮组件，还是复杂的 Todo List 应用，Vue 3 的灵活性和强大功能都能满足需求。

对于初学者，建议从模仿官方文档示例开始，逐步实践组件化开发；而中级开发者则可探索 Composition API 的深度应用，结合状态管理工具构建大型项目。随着对 Vue 3 组件体系的深入理解，您将能更高效地应对复杂的前端开发挑战，并为团队协作与代码维护打下坚实的基础。

记住，组件化开发的核心在于“分而治之”——将复杂问题拆解为可管理的模块，通过规范化的通信机制与工具链支持，最终构建出高效、可维护的用户界面。

vue3 component（超详细）

一、Vue 3 组件的基本概念与创建方式

1.1 什么是组件？

1.2 组件的创建与注册

基础语法

组件注册与使用

1.3 模板语法基础

二、组件间通信与数据流管理

2.1 Props：父组件向子组件传递数据

示例：父组件传递文本内容

Props 的验证与默认值

2.2 事件：子组件向父组件传递消息

2.3 状态管理：跨越组件的复杂场景

三、Vue 3 组件的高级特性

3.1 Composition API：代码逻辑的重组

3.2 模板函数与渲染策略

3.3 自定义渲染函数：深度控制 UI

四、实践案例：构建一个可复用的 Todo List 组件

4.1 组件设计与功能拆分

组件结构

4.2 核心代码实现

主组件 `TodoList.vue`

子组件 `TodoItem.vue`

4.3 优化与扩展

五、组件性能优化与最佳实践

5.1 减少不必要的渲染

5.2 异步组件与懒加载

5.3 开发工具与调试

六、结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

vue3 component（超详细）

一、Vue 3 组件的基本概念与创建方式

1.1 什么是组件？

1.2 组件的创建与注册

基础语法

组件注册与使用

1.3 模板语法基础

二、组件间通信与数据流管理

2.1 Props：父组件向子组件传递数据

示例：父组件传递文本内容

Props 的验证与默认值

2.2 事件：子组件向父组件传递消息

2.3 状态管理：跨越组件的复杂场景

三、Vue 3 组件的高级特性

3.1 Composition API：代码逻辑的重组

3.2 模板函数与渲染策略

3.3 自定义渲染函数：深度控制 UI

四、实践案例：构建一个可复用的 Todo List 组件

4.1 组件设计与功能拆分

组件结构

4.2 核心代码实现

主组件 TodoList.vue

子组件 TodoItem.vue

4.3 优化与扩展

五、组件性能优化与最佳实践

5.1 减少不必要的渲染

5.2 异步组件与懒加载

5.3 开发工具与调试

六、结论

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

主组件 `TodoList.vue`

子组件 `TodoItem.vue`