Vue3进阶入门指南

Vue3 进阶从选项式 API 到组件通信学完 Vue3 的基础语法后真正影响开发效率的往往不是某一个指令而是能不能把组件、状态、表单和生命周期串起来使用。本文围绕 Vue3 中最常见的进阶知识点展开选项式 API、单文件组件、应用挂载、表单处理、组件复用、props 传值、子组件事件通信以及生命周期钩子。如果你已经能写出简单页面但还不确定 Vue 组件内部的数据如何组织、父子组件如何协作、生命周期代码应该放在哪里这篇文章可以作为一份清晰的梳理。1. 选项式 API用对象组织组件逻辑Vue3 同时支持组合式 API 和选项式 API。对于刚开始进阶的同学来说选项式 API 更直观组件的状态、方法、计算属性和生命周期钩子都被放在一个对象中。script export default { // data() 返回的属性会成为响应式状态 // 并且可以通过 this 访问 data() { return { count: 0, author: { books: [Vue Guide] } } }, // methods 用来声明事件处理函数或普通方法 methods: { increment() { this.count } }, // computed 用来声明依赖响应式数据的计算结果 computed: { publishedBooksMessage() { return this.author.books.length 0 ? Yes : No } }, // mounted 会在组件挂载完成后执行 mounted() { console.log(The initial count is ${this.count}.) } } /script template button clickincrementCount is: {{ count }}/button pHas published books: {{ publishedBooksMessage }}/p /template这段代码包含了选项式 API 的几个核心部分data声明组件内部的响应式数据。methods声明组件方法常用于事件处理。computed声明计算属性适合处理由状态推导出的结果。mounted生命周期钩子适合在组件完成初始渲染后执行逻辑。当组件逻辑还不复杂时选项式 API 的结构非常清楚随着业务增长也可以逐步过渡到组合式 API。2. 单文件组件把结构、逻辑和样式放在一起Vue 项目中最常见的组件形式是.vue单文件组件。它通常由三个区域组成script、template和style。script export default { data() { return { count: 0 } } } /script template button clickcountCount is: {{ count }}/button /template style scoped button { font-weight: bold; } /style其中script负责组件逻辑。template负责页面结构。style scoped负责当前组件样式scoped可以让样式尽量只作用于当前组件。单文件组件的好处是边界清晰适合复用和维护。一个按钮、一个列表、一张卡片甚至一个完整页面都可以被拆成组件。3. 根组件与应用挂载Vue 应用需要通过createApp创建应用实例再挂载到页面中的某个 DOM 节点上。import { createApp } from vue const app createApp({ data() { return { count: 0 } } }) app.mount(#app)这里的#app对应 HTML 中的根节点dividapp/div可以把根组件理解为整个 Vue 应用的入口。实际项目中我们通常会把根组件写成App.vue再在main.js或main.ts中完成挂载。4. 表单处理用 v-model 简化双向绑定表单是前端项目中非常高频的场景。Vue 提供了v-model可以让输入框的值和组件状态保持同步。文本输入pMessage is: {{ message }}/p input v-modelmessage placeholderedit me /当用户输入内容时message会自动更新当message被代码修改时输入框也会同步变化。多行文本spanMultiline message is:/span p stylewhite-space: pre-line;{{ message }}/p textarea v-modelmessage placeholderadd multiple lines/textarea多行文本常用于评论、备注、说明等场景。展示时可以配合white-space: pre-line;保留换行效果。复选框input typecheckbox idcheckbox v-modelchecked / label forcheckbox{{ checked }}/label单个复选框通常绑定布尔值适合表示“是否启用”“是否同意”等状态。单选按钮divPicked: {{ picked }}/div input typeradio idone valueOne v-modelpicked / label foroneOne/label input typeradio idtwo valueTwo v-modelpicked / label fortwoTwo/label多个单选按钮绑定同一个变量变量值会等于当前被选中的value。选择器单选选择器divSelected: {{ selected }}/div select v-modelselected option disabled valuePlease select one/option optionA/option optionB/option optionC/option /select多选选择器divSelected: {{ selected }}/div select v-modelselected multiple optionA/option optionB/option optionC/option /select如果选项来自接口或配置可以使用v-for动态渲染divSelected: {{ selected }}/div select v-modelselected option v-foroption in options :keyoption.value :valueoption.value {{ option.text }} /option /select这里建议给v-for添加key这样 Vue 可以更稳定地追踪列表节点。5. 组件基础定义组件与使用组件组件可以理解为可复用的 UI 单元。一个.vue文件通常就是一个组件。例如我们定义一个ButtonCounter.vuescript export default { data() { return { count: 0 } } } /script template button clickcountYou clicked me {{ count }} times./button /template然后在父组件中引入并使用它script import ButtonCounter from ./ButtonCounter.vue export default { components: { ButtonCounter } } /script template h1Here is a child component!/h1 ButtonCounter / /template组件拆分的关键不是“越细越好”而是看它是否具备复用价值、是否能让当前页面更容易维护。6. props父组件向子组件传值父组件向子组件传递数据最常用的方式是props。子组件BlogPost.vuescript export default { props: [title] } /script template h4{{ title }}/h4 /template父组件script import BlogPost from ./BlogPost.vue export default { components: { BlogPost }, data() { return { posts: [ { id: 1, title: My journey with Vue }, { id: 2, title: Blogging with Vue }, { id: 3, title: Why Vue is so fun } ] } } } /script template BlogPost v-forpost in posts :keypost.id :titlepost.title / /template这里的:titlepost.title表示把父组件中的post.title动态传给子组件的title属性。7. 子组件通知父组件优先使用 emit有些初学者会在子组件里通过this.$parent直接调用父组件方法。虽然这种方式能运行但不推荐长期使用因为它会让父子组件强耦合后续维护成本较高。更推荐的方式是子组件通过$emit抛出事件父组件监听事件并处理业务逻辑。子组件template button clickhandleClick点击/button /template script export default { methods: { handleClick() { this.$emit(confirm) } } } /script父组件template Child confirmfatherMethod / /template script import Child from ./Child.vue export default { components: { Child }, methods: { fatherMethod() { console.log(测试) } } } /script这种写法更符合 Vue 的单向数据流父组件通过props给子组件传值子组件通过事件通知父组件。8. 生命周期在合适的阶段执行代码生命周期钩子用于在组件不同阶段执行代码。以mounted为例它会在组件完成初始渲染并创建 DOM 节点后执行。export default { mounted() { console.log(the component is now mounted.) } }常见使用场景包括组件挂载后请求接口数据。初始化依赖 DOM 的第三方库。读取页面元素尺寸。注册事件监听并在组件卸载时清理。如果需要查看完整生命周期可以参考 Vue 官方文档https://cn.vuejs.org/api/options-lifecycle.html9. 小结本文梳理了 Vue3 进阶阶段最常见的几个知识点选项式 API 用于组织组件状态、方法、计算属性和生命周期。单文件组件让结构、逻辑和样式拥有清晰边界。createApp和mount是 Vue 应用启动的入口。v-model可以简化表单双向绑定。组件拆分能提升复用性和可维护性。props用于父传子emit用于子通知父。生命周期钩子适合处理组件不同阶段的副作用逻辑。掌握这些内容后再去学习组合式 API、Pinia、Vue Router、组件封装和工程化实践会顺畅很多。Vue3 的学习重点不是记住每个 API而是理解组件之间如何协作以及状态如何驱动视图更新。