前端笔记-Vue3（下）

学习参考视频：尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程_哔哩哔哩_bilibili

vue3学习目标：

VUE 3	1、Vue3架构与设计理念
	2、组合式API（Composition API）
	3、常用API：ref、reactive、watch、computed
	4、Vue3的生命周期
	5、组件间通信（props、emit、defineModel）
	6、了解插槽

Vue 生命周期钩子详解（Vue 2 & Vue 3 对比）

生命周期概念图解

https://cn.vuejs.org/assets/lifecycle_zh-CN.W0MNXI0C.png

生命周期阶段对比表

阶段	Vue 2 钩子	Vue 3 钩子	触发时机	典型用途
​创建​	beforeCreate	setup()	组件实例刚被创建	初始化响应式数据
	created	setup()	数据观测/事件配置完成	异步请求数据
​挂载​	beforeMount	onBeforeMount	模板编译/挂载前	访问/操作DOM前的最后机会
	mounted	onMounted	组件挂载到DOM后	操作DOM、初始化第三方库
​更新​	beforeUpdate	onBeforeUpdate	数据变化，DOM更新前	获取更新前的DOM状态
	updated	onUpdated	虚拟DOM重新渲染后	执行依赖DOM的操作
​销毁​	beforeDestroy	onBeforeUnmount	实例销毁前	清除定时器/取消订阅
	destroyed	onUnmounted	实例销毁后	清理内存/移除事件监听

Vue 3 生命周期示例

<template><div class="demo"><h2>计数器: {{ count }}</h2><button @click="increment">增加</button><button @click="showComponent = false">卸载组件</button><ChildComponent v-if="showComponent" /></div>
</template><script setup lang="ts">
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
import ChildComponent from './ChildComponent.vue'// 1. 创建阶段（setup）
const count = ref(0)
const showComponent = ref(true)console.log('1. setup阶段 - 数据初始化完成')// 3. 挂载阶段
onMounted(() => {console.log('3. mounted - 组件已挂载到DOM')// 这里可以安全地操作DOMdocument.title = `当前计数: ${count.value}`
})// 4. 更新阶段
onUpdated(() => {console.log('4. updated - DOM已更新')// 避免在这里修改状态，可能导致无限循环！
})// 方法
function increment() {count.value++console.log('2. 数据变化触发更新流程')
}// 子组件示例
const ChildComponent = {setup() {onMounted(() => {console.log('子组件 mounted')})onUnmounted(() => {console.log('子组件 unmounted')})return {}},template: '<div>子组件内容</div>'
}
</script>

生命周期执行顺序演示

1. 组件初始化时：

   1. setup阶段 - 数据初始化完成
   3. mounted - 组件已挂载到DOM

2. 点击"增加"按钮时：

   2. 数据变化触发更新流程
   4. updated - DOM已更新

3. 点击"卸载组件"时：

   子组件 unmounted

 挂载阶段完整顺序（父 → 子）

1. ​父组件​ setup() 执行
2. ​父组件​ onBeforeMount
3. ​子组件​ setup() 执行
4. ​子组件​ onBeforeMount
5. ​子组件​ onMounted（子组件先完成挂载）
6. ​父组件​ onMounted（父组件最后完成挂载）

常用钩子使用场景

1. onMounted - 最常用

onMounted(async () => {// 加载初始数据const response = await fetch('/api/data')data.value = await response.json()// 初始化图表chart = new Chart(document.getElementById('chart'), {// 配置项})
})

2. onUpdated - 谨慎使用

onUpdated(() => {// 典型用例：自动滚动到底部listContainer.value.scrollTop = listContainer.value.scrollHeight
})

3. onUnmounted - 资源清理

onUnmounted(() => {// 清除定时器clearInterval(timer)// 取消事件监听window.removeEventListener('resize', handleResize)// 销毁第三方库实例chart?.destroy()
})

Vue 2 与 Vue 3 生命周期对比

关键区别：

1. ​Vue 3 使用 setup 替代了 beforeCreate 和 created
2. ​所有钩子都需要显式导入​
3. ​命名更语义化（unmount 替代 destroy）​​
4. ​组合式API让相关代码更集中​

---

补充 自定义Hooks

什么是自定义 Hook？

自定义 Hook 是 Vue 3 组合式 API 的核心实践方式，本质是一个封装了响应式逻辑的函数。它解决了两个核心问题：

1. ​逻辑复用​ - 避免重复代码
2. ​关注点分离​ - 让组件更专注于模板渲染

就比如，在写到一个组件里面存着在不同逻辑的数据和处理数据的方法时，全部都混用了

<template><div class="hooks-test"><h2>当前求和为：{{sum}}</h2><button @click="add">点我+1</button><hr><img v-for="(dog,index) in dogList" :src="dog" :key="index"><br><button @click="getDog">再来一只狗</button></div>
</template><script lang="ts" setup>import { ref,reactive } from 'vue'import axios from 'axios'    let sum = ref(0)let dogList = reactive(['https:\/\/images.dog.ceo\/breeds\/pembroke\/n02113023_2390.jpg'])function add(){sum.value += 1}// function getDog(){//   axios.get('https://dog.ceo/api/breeds/image/random')//  .then(res => {//     dogList.push(res.data.message)//   })// }async function getDog(){try {let result = await axios.get('https://dog.ceo/api/breeds/image/random')dogList.push(result.data.message)} catch (error) {alert(error)}}</script><style scoped>
.hooks-test{background-color: beige;padding: 20px;text-align: center;border: 1px solid black;
}
img{height: 200px;margin: 20px;
}
</style>

 图示代码又处理数字数据又处理狗狗数据，数据和处理逻辑没有分开，导致代码阅读时有一定的障碍，这个时候我们就可以使用hooks自定义，将实现同一个功能所需要的数据和方法单独封装在一起

Hook 基础结构

首先注意，hook命名规范是useXxxx.js/ts

1. 计数器 Hook 示例 (useCounter.ts)

import { ref, onMounted } from 'vue'export default function(initialValue = 0) {// 响应式数据const count = ref(initialValue)// 操作方法const increment = () => count.value++const decrement = () => count.value--const reset = () => count.value = initialValue// 生命周期onMounted(() => {console.log('计数器Hook已挂载')})// 暴露给组件的APIreturn {count,increment,decrement,reset}
}

2. 异步数据 Hook 示例 (useFetch.ts)

import { reactive, onMounted } from 'vue'
import axios from 'axios'export default function(url: string) {const state = reactive({data: null as any,loading: false,error: null as Error | null})const fetchData = async () => {state.loading = truetry {const response = await axios.get(url)state.data = response.data} catch (err) {state.error = err as Error} finally {state.loading = false}}onMounted(fetchData)return {...state,refetch: fetchData}
}

组件中使用 Hook

1. 基础用法

<template><div><p>Count: {{ counter.count }}</p><button @click="counter.increment">+</button><button @click="counter.decrement">-</button><button @click="counter.reset">Reset</button></div>
</template><script setup lang="ts">
import useCounter from '@/hooks/useCounter'const counter = useCounter(10) // 初始值10
</script>

2. 组合多个 Hook

<template><div><!-- 计数器 --><div>{{ counter.count }}</div><!-- 异步数据 --><div v-if="posts.loading">Loading...</div><div v-else>{{ posts.data }}</div></div>
</template><script setup lang="ts">
import useCounter from '@/hooks/useCounter'
import useFetch from '@/hooks/useFetch'const counter = useCounter()
const posts = useFetch('/api/posts')
</script>

最佳实践

1. 命名规范

• 始终以 use 开头 (useXxx)
• 一个文件只包含一个 Hook
• 放在 src/hooks 目录下

2. 类型安全

// useUser.ts
import { ref } from 'vue'interface User {id: numbername: stringemail: string
}export default function() {const user = ref<User | null>(null)return {user}
}

3. 复杂 Hook 示例 (usePagination.ts)

import { reactive, computed } from 'vue'export default function(totalItems: number, perPage = 10) {const state = reactive({currentPage: 1,perPage})const totalPages = computed(() => Math.ceil(totalItems / state.perPage))const nextPage = () => {if (state.currentPage < totalPages.value) {state.currentPage++}}return {...state,totalPages,nextPage}
}

与 Vue 2 Mixins 对比

特性	自定义 Hook	Mixins
​代码组织​	按功能组织	按选项合并
​命名冲突​	无（可重命名解构）	容易冲突
​类型支持​	完整 TypeScript 支持	支持有限
​逻辑复用​	显式导入	全局混入
​调试​	清晰的调用栈	难以追踪逻辑来源

高级技巧

1. 本地存储 Hook (useLocalStorage.ts)

import { ref, watch } from 'vue'export default function(key: string, defaultValue: any) {const data = ref(JSON.parse(localStorage.getItem(key) || 'null') || defaultValue)watch(data, (newVal) => {localStorage.setItem(key, JSON.stringify(newVal))}, { deep: true })return data
}

2. 鼠标位置 Hook (useMouse.ts)

import { ref, onMounted, onUnmounted } from 'vue'export default function() {const x = ref(0)const y = ref(0)const update = (e: MouseEvent) => {x.value = e.pageXy.value = e.pageY}onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))return { x, y }
}

常见问题解决

1. Hook 之间共享状态

// useSharedState.ts
import { reactive } from 'vue'const state = reactive({count: 0
})export function useSharedCounter() {const increment = () => state.count++return {count: state.count,increment}
}

2. 响应式解构问题

// ❌ 错误 - 失去响应性
const { count, increment } = useCounter()// ✅ 正确 - 保持响应性
const counter = useCounter()
// 在模板中使用 counter.count

---

（未完）