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}
}