2025-5-26Vue3快速上手

1、Vue3的生命周期

创建=》挂载前=》挂载完毕=》更新前=》更新完毕=》卸载前=》卸载完毕

Vue2和Vue3生命周期对比

父组件与子组件的生命周期关系

父组件会先于子组件创建，等子组件挂载完毕，父组件才挂载完毕，子组件的更新不会引起父组件的更新，但是子组件的卸载和重新创建会引起父组件的更新

2.自定义Hooks

​​Hooks（组合式函数）​​ 的核心优势之一就是 ​​将相关的数据、方法、逻辑整合在一起​​，使代码更加模块化、可维护和可复用。

在src下新建一个hooks文件夹，

hooks的文件命名规则为 useXxx，

<template><div><h2>当前求和为：{{ sum }} 放大10倍后:{{bigSum  }}</h2><button @click="changeSum">求和加1</button><br><img v-for="(item,index) in dogList" :key="index" :src="item" alt=""><br><button @click="addDog">点我再来一只小狗</button></div>
</template><script lang="ts">export default {name:'Person234'}
</script><script lang="ts" setup >
import useDog from '../hooks/useDog';
import useSum from '../hooks/useSum';const {sum,changeSum,bigSum} =useSum()
const {dogList,addDog} = useDog()</script><style scope>
img{height: 100px;margin:10px;
}</style>

useDog.ts:

import {ref,reactive} from 'vue'
import axios from 'axios';export default function(){
//数据
const dogList = reactive(["https://images.dog.ceo/breeds/pembroke/n02113023_5310.jpg"
])
//方法
const  addDog = async ()=>{try {let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')dogList.push(result.data.message)} catch (error) {alert('请求错误')}
}
return {dogList,addDog}}

useSum.ts:

import {ref,reactive,computed} from 'vue'export default function(){
//数据
const sum = ref(0)
const bigSum = computed(()=>{return sum.value*10
})
//方法
const changeSum = ()=>{sum.value += 1
}
//将数据、方法等送出去
return {sum,changeSum,bigSum}
}