Vue学习计划-Vue3--核心语法(五)生命周期、自定义Hook

2024-01-07 17:46:35
1. 生命周期
  • 概念: Vue组件实例在创建时要经历一些列的初始化步骤,在此过程中vue会在合适的时机,调用特定函数,从而让开发中有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子
  • 规律:

生命周期整体分为四个阶段:分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后

  • Vue2的生命周期

创建阶段:beforeCreatecreated
挂载阶段:beforeMountmounted
更新阶段: beforeUpdateupdated
销毁阶段:beforeDestroydestroyed

  • Vue3的生命周期

创建阶段:setup
挂载阶段:onBeforeMountonMounted
更新阶段:onBeforeUpdateonUpdated
卸载阶段:onBeforeUnmountonMounted

  • 常用的钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)
  • 示例代码
<template>
  <div>
    <h2>当前值为{{ num }}</h2>
    <button @click="changeSum">点击加1</button>
  </div>
</template>

<script setup lang="ts">
import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'
let num = ref(0)

function changeSum() {
  num.value += 1
}
console.log('创建')

onBeforeMount(() => {
  console.log('挂载之前')
})
onMounted(() => {
  console.log('挂载完毕')
})
onBeforeUpdate(() => {
  console.log('更新之前')
})
onUpdated(() => {
  console.log('更新完毕')
})
onBeforeUnmount(() => {
  console.log('卸载之前')
})
onUnmounted(() => {
  console.log('卸载完毕')
})

</script>
2. 自定义Hook
  • 什么是hook? ————本质是一个函数,把setup函数中使用的Composition API进行了封装,类似与Vue2中的mixin
  • 自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂
  • hooks文件夹中,每一个功能的hook文件期望是usexxx命名的
  • hook的出现诠释了composition API 的终极意义
  • 示例代码
    1. useSum.ts中内容如下:
    import { ref, computed, onMounted } from 'vue'
    
    export default function() {
      let sum = ref(0)
    
      let bigSum = computed(()=> {
        return sum.value * 10
      })
    
      onMounted(()=> {
        changeSum()
      })
      
      function changeSum(){
        sum.value += 1
      }
    
      return {sum, bigSum, changeSum}
    }
    
    1. useDog.ts中内容如下:
    import { reactive, onMounted } from 'vue'
    import axios from 'axios'
    
    export default function(){
      let dogList = reactive([])
    
      async function getDog(){
          try{
            let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
            dogList.push(data.message)
          } catch(error){
            alert(error)
          }
      }
      onMounted(() => {
        getDog()
      })
    
      return {dogList, getDog}
    }
    
    1. 组件中具体使用:
    <template>
      <div>
        <h2>当前值为{{ sum }}, 变大10倍的值是: {{ bigSum }}</h2>
        <button @click="changeSum">点击加1</button>
        <hr>
        <img v-for="(dog,index) in dogList" :src="dog" :key="index" alt="">
        <button @click="getDog">添加一只狗</button>
      </div>
    </template>
    
    <script setup lang="ts">
    import useSum from '@/hooks/useSum'
    import useDog from '@/hooks/useDog'
    
    let { sum, bigSum, changeSum } = useSum()
    let { dogList, getDog } = useDog()
    </script>
    <style scoped>
    img{
      height: 150px;
      margin-right: 10px;
    }
    </style>
    

文章来源:https://blog.csdn.net/qq_35940731/article/details/135418873
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。