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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值