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

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

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

  • Vue2的生命周期

创建阶段:beforeCreatecreated

挂载阶段:beforeMountmounted

更新阶段: beforeUpdateupdated

销毁阶段:beforeDestroydestroyed

  • Vue3的生命周期

创建阶段:setup

挂载阶段:onBeforeMountonMounted

更新阶段:onBeforeUpdateonUpdated

卸载阶段:onBeforeUnmountonMounted

  • 常用的钩子:onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

  • 示例代码

    <template>

    当前值为{{ num }}

    <button @click="changeSum">点击加1</button>
    </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}
      }

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

    3. 组件中具体使用:

      <template>

      当前值为{{ sum }}, 变大10倍的值是: {{ bigSum }}

      <button @click="changeSum">点击加1</button>
      <button @click="getDog">添加一只狗</button>
      </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>
相关推荐
mosen8681 分钟前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
cuisidong199722 分钟前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
南宫理的日知录30 分钟前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
数据与后端架构提升之路1 小时前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
problc2 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
一行12 小时前
电脑蓝屏debug学习
学习·电脑
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js