Vue3框架

一、Vue3 基础1. Composition API 与 Options API 对比概念Options APIVue2 风格将数据、方法、生命周期等写在data、methods、mounted等固定选项中。Composition APIVue3 新增通过setup()函数将相关逻辑聚合在一起更灵活、易于复用。功能Options API 简单直观适合小型项目。Composition API 利于代码组织、逻辑复用适合复杂组件。!-- Options API -- script export default { data() { return { count: 0 }; }, methods: { increment() { this.count; } }, mounted() { console.log(mounted); } }; /script !-- Composition API -- script setup import { ref, onMounted } from vue; const count ref(0); const increment () count.value; onMounted(() console.log(mounted)); /script2. 响应式原理ref、reactive、toRefs概念ref将基本类型或对象包装为响应式数据通过.value访问。reactive将对象变为响应式直接访问属性。toRefs将reactive对象的属性转为ref便于解构后保持响应性。功能数据变化时视图自动更新。在script setup中无需.value模板中自动解包script setup import { ref, reactive, toRefs } from vue; // ref const count ref(0); // reactive const state reactive({ name: Tom, age: 18 }); // toRefs 解构 const { name, age } toRefs(state); /script template p{{ count }}/p !-- 自动解包 -- p{{ state.name }}/p p{{ name }}/p !-- 解构后仍响应式 -- button clickcount1/button /template3. 生命周期钩子setup 中的生命周期概念组件从创建到销毁的过程中Vue 提供的回调函数。功能在特定阶段执行代码如请求数据、清理定时器。生命周期流程图Vue 3创建实例 → 初始化事件生命周期 → 注入响应性 → 模板编译 → 挂载DOM → 更新 → 卸载对应关系Options → Composition阶段选项式 API (Vue 2/3)组合式 API (Vue 3)说明实例初始化beforeCreatesetup()执行Vue 2 中先执行beforeCreate再执行createdVue 3 组合式 API 中setup取代二者在beforeCreate之前执行实例创建完成createdsetup()执行完毕此时可访问data、methods、computed但尚未挂载 DOM挂载前beforeMountonBeforeMount模板已编译虚拟 DOM 已生成尚未插入页面挂载完成mountedonMounted组件已挂载到真实 DOM可访问$el适合发起网络请求、操作 DOM更新前beforeUpdateonBeforeUpdate响应式数据变化导致虚拟 DOM 重新渲染前触发更新完成updatedonUpdated组件 DOM 已完成更新注意避免在此修改状态导致死循环卸载前Vue 2: beforeDestroybeforeUnmountonBeforeUnmount组件实例即将被销毁适合清理定时器、解绑事件卸载后Vue 2: destroyedunmountedonUnmounted组件已被销毁所有子组件一并销毁script setup import { onMounted, onUnmounted } from vue; onMounted(() { console.log(组件已挂载); // 发起请求 }); onUnmounted(() { console.log(组件即将销毁); // 清理定时器等 }); /script4. 模板语法、指令概念模板语法在 HTML 中使用{{ }}插值、绑定属性等。指令以v-开头的特殊属性用于操作 DOM。常用指令v-if/v-else/v-else-if条件渲染动态添加/移除元素v-for列表渲染需要:keyv-bind简写:动态绑定属性v-on简写绑定事件v-model双向绑定表单输入script setup import { ref } from vue; const show ref(true); const items ref([{ id: 1, name: A }, { id: 2, name: B }]); const inputVal ref(); /script template button clickshow !show切换/button p v-ifshow显示内容/p ul li v-foritem in items :keyitem.id{{ item.name }}/li /ul input v-modelinputVal placeholder输入内容 p输入{{ inputVal }}/p /template5. 组件注册、props、emits、插槽概念组件注册组件注册是指将自定义的 Vue 组件告知 Vue 实例或当前组件使其可以在模板中以标签形式使用的过程Vue 组件需要被“注册”后才能在模板中被识别Vue 3 提供了全局注册和局部注册两种方式在组合式 API 中还有基于script setup的自动注册。全局app.component或局部在script setup中直接导入使用。props父组件传递数据给子组件。emits子组件触发事件通知父组件。插槽父组件向子组件传递模板内容。功能实现组件通信和内容分发。