前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue篇(012)-在compositionAPI中如何使用生命周期函数?

Vue篇(012)-在compositionAPI中如何使用生命周期函数?

作者头像
齐丶先丶森
发布2022-05-12 21:10:49
1.3K0
发布2022-05-12 21:10:49
举报
文章被收录于专栏:前端面试秘籍前端面试秘籍

参考答案:

需要用到哪个生命周期函数,就将对应函数的import进来,接着在setup中调用即可

解析:

1.由于setup是随着beforeCreate和created这两个生命周期钩子运行的,因此在你无需显式地定义它们。换句话说,任何想写进这两个钩子的代码,都应当直接写在setup方法里面。

2.其他的生命周期函数在setup中使用的时候只需要在前面加上一个‘on’即可,如mounted的生命周期函数在setup中写为onMounted

3.所有在setup中使用的生命周期函数都需要import引入,如:import {onMounted} from 'vue'

4.setup中生命周期函数的写法是在调用的生命周期函数中写上一个回调函数,如onMounted函数的写法:

代码语言:javascript
复制
export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

下面这个表格描述了setup内部的钩子

选项 API

setup内部的钩子

beforeCreate

不需要

created

不需要

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeUnmount

onBeforeUnmount

unmounted

onUnmounted

errorCaptured

onErrorCaptured

renderTracked

onRenderTracked

renderTriggered

onRenderTriggered

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-03-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端面试秘籍 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档