Vue 3 完整入门：从响应式原理到组件化开发

文章定位：Vue 3、响应式、组件、路由、状态管理和工程化

核心结论

Vue 3 应用由组件树组成。模板表达界面，响应式系统负责在依赖变化后调度更新，组件通过明确的输入和输出形成可测试的边界。实际项目应先划分页面、业务组件和可复用逻辑，再决定状态放在哪一层。

维度	核心内容	实践建议
页面	组合业务模块和路由数据	保持页面薄
组件	处理展示和局部交互	明确 props 与 emits
Composable	复用有状态逻辑	以 use 开头并独立测试
服务层	封装接口和错误转换	不在模板中直接请求 API

npm create vite@latest vue-admin -- --template vue
cd vue-admin
npm install
npm run dev

响应式数据可用 ref、reactive 和 computed 表达。能由已有状态计算出的值不要再复制成独立状态，否则会出现同步问题。

<script setup>
import { ref, computed } from "vue"
const keyword = ref("")
const users = ref([{ name: "Alice" }])
const visibleUsers = computed(() => users.value.filter(u => u.name.includes(keyword.value)))
</script>

父组件通过 props 向下传值，子组件通过 emits 向上报告事件。跨页面共享状态可以使用 Pinia。生命周期钩子应与资源管理对应，在卸载时清理计时器、监听器和订阅。

上线前检查路由懒加载、接口错误、空数据、移动端布局、环境变量和构建产物。

参考资料

1 2