零基础学Vue3组件化开发

零基础学Vue3组件化开发：从原理到实战

摘要：本文带你从零搭建Vue3组件，掌握单文件组件(SFC)写法和Composition API最佳实践。

🔥 背景：

• 为什么需要组件化？（复用性、可维护性）
• Vue3对比Vue2的组件开发有哪些变化？

🛠️ 实现步骤：

创建基础组件

<!-- MyButton.vue -->
<template><button :class="classes" @click="handleClick">{{ label }}</button>
</template><script setup>
import { computed, defineProps, defineEmits } from 'vue'// 定义props
const props = defineProps({label: {type: String,default: 'Click me'},type: {type: String,default: 'primary',validator: (val) => ['primary', 'secondary', 'danger'].includes(val)}
})// 定义emits
const emits = defineEmits(['click'])// 计算属性
const classes = computed(() => {return `btn btn-${props.type}`
})// 方法
const handleClick = () => {emits('click')
}
</script>

使用组件

<template><div><MyButton label="Submit" @click="submitForm" /></div>
</template><script setup>
import MyButton from './MyButton.vue'const submitForm = () => {console.log('Form submitted!')
}
</script>

⚡ 性能优化：

• 使用defineComponent明确类型（TypeScript项目）
• 按需引入组件（借助Vite的import.meta.glob）

📚 扩展阅读：

• Vue3官方文档：组件基础
• VueUse：常用组件逻辑复用库

💬 互动：
你在组件开发中遇到过哪些坑？欢迎分享~