Vue3的生命周期函数

使用Vue3的生命周期钩子,有两种写法,

  1. 通过配置项的形式使用生命周期钩子。
  2. 通过组合式API的形式使用生命周期钩子。

通过配置项的形式使用生命周期钩子

Vue3有如下生命周期钩子,分别是,

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmount
  • unmounted

看具体例子吧。

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <button @click="isShowDemo = !isShowDemo">切换(隐藏/显示)</button>
  <Demo v-if="isShowDemo"/>
</template>

<script>
import Demo from './components/Demo.vue'
import {ref} from "vue";
export default {
  name: 'App',
  components: {
    Demo
  },
  setup(){
    let isShowDemo = ref(true);
    
    return {isShowDemo};
  }
}
</script>
  • Demo.vue
<template>
  <h2>sum的当前值为:{{sum}}</h2>
  <button @click="sum++">点我+1</button>
</template>

<script>
import {ref} from "vue";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);

    return {
      sum
    }
  },
  beforeCreate(){
    console.log("Demo Enter:  beforeCreate");
  },
  created(){
    console.log("Demo Enter:  created");
  },
  beforeMount(){
    console.log("Demo Enter:  beforeMount");
  },
  mounted(){
    console.log("Demo Enter:  mounted");
  },
  beforeUpdate(){
    console.log("Demo Enter:  beforeUpdate");
  },
  updated(){
    console.log("Demo Enter:  updated");
  },
  beforeUnmount(){
    console.log("Demo Enter:  beforeUnmount");
  },
  unmounted(){
    console.log("Demo Enter:  unmounted");
  }
}
</script>
  • 启动应用,测试效果
    在这里插入图片描述

通过组合式API的形式使用生命周期钩子

选项式生命周期钩子和组合式API之间的映射关系是,

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeUnmount -> onBeforeUnmount
  • unmounted -> onUnmounted

看具体例子。

  • main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
  • App.vue
<template>
  <button @click="isShowDemo = !isShowDemo">切换(隐藏/显示)</button>
  <Demo v-if="isShowDemo"/>
</template>

<script>
import Demo from './components/Demo.vue'
import {ref} from "vue";
export default {
  name: 'App',
  components: {
    Demo
  },
  setup(){
    let isShowDemo = ref(true);
    
    return {isShowDemo};
  }
}
</script>
  • Demo.vue
<template>
  <h2>sum的当前值为:{{sum}}</h2>
  <button @click="sum++">点我+1</button>
</template>

<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
export default {
  name: 'Demo',
  setup(){
    let sum = ref(0);

    onBeforeMount(() => {
      console.log("Demo enter:  onBeforeMount")
    })
    onMounted(() => {
      console.log("Demo enter:  onMounted")
    })
    onBeforeUpdate(() => {
      console.log("Demo enter:  onBeforeUpdate")
    })
    onUpdated(() => {
      console.log("Demo enter:  onUpdated")
    })
    onBeforeUnmount(() => {
      console.log("Demo enter:  onBeforeUnmount")
    })
    onUnmounted(() => {
      console.log("Demo enter:  onUnmounted")
    })


    return {
      sum
    }
  }
}
</script>
  • 启动应用,测试效果
    在这里插入图片描述
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3生命周期函数是指在Vue3实例创建、更新、渲染和销毁这几个重要阶段执行的函数。Vue3中生命周期函数分为两类:组件生命周期函数和全局生命周期函数。 首先是组件生命周期函数,包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted等方法。 beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用,此时 data 和 methods 都还未被初始化。 created:组件实例已经完全创建,包括属性计算、watch/event 事件回调。在这里可以访问到已经存在的 DOM 元素,但是该组件的 DOM 元素尚未被渲染出来。 beforeMount:在挂载开始之前被调用,在此之前 template/render 函数已经完成编译。 mounted:组件挂载到 DOM 上后调用,此时真实的 DOM 元素已经生成,可以对 DOM 进行操作。 beforeUpdate:在数据更新之前被调用,此时可以进行修改数据操作。在此函数执行时组件 DOM 所依赖的 props 和 computed 已经更新,但是尚未开始重新渲染 DOM。 updated:数据更新时调用,此时组件 DOM 已经重新渲染过,可以对 DOM 进行操作。 beforeUnmount:在卸载组件之前调用,此时组件实例仍然可以访问。 unmounted:组件卸载完成后调用,在这里执行一些清理工作,比如清除定时器、解除事件监听等。 接下来是全局生命周期函数,包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated和errorCaptured等方法。 errorCaptured:可以在组件的内部所抛出的异常被捕获和处理后,再将这个异常最终传递给全局错误处理。在捕获到错误时,可以对错误进行处理,并使用 nextTick 在渲染更新后再将错误信息抛出。 总之,Vue3的生命周期函数提供了方便的钩子函数来执行组件和全局的自定义逻辑,允许开发人员在关键的阶段进行处理来实现更加复杂的业务逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值