介绍

vue3的生命周期函数,可以按需导入到组件中,且只能setup() 函数中使用

示例

import { onMounted, onUpdated } from '@vue/composition-api'

export default {
setup() {
onMounted(() => {
console.log('mounted')
})
onUpdated(() => {
console.log('updated')
})
}
}

对比vue2.x

  • beforeCreate -> 使用setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

vue3生命周期的更多相关文章

  1. vue2和vue3生命周期的区别

    概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...

  2. Vue3 生命周期 && Hooks封装 && toRef

    1 # 一.Vue3.0与Vue2.0生命周期改动 2 beforDestroy改名为beforeUnmount 3 destroyed改名为unmounted 4 # Vue3.0页提供了Compo ...

  3. Vue3生命周期的理解

    beforeCreate():在实例生成之前 created():在实例生成之后 beforeMount():在模板已经被编译成函数之后,组件内容被渲染到页面之前 mounted():在组件内容被渲染 ...

  4. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  5. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  6. C# MVC 5 - 生命周期(应用程序生命周期&请求生命周期)

    本文是根据网上的文章总结的. 1.介绍 本文讨论ASP.Net MVC框架MVC的请求生命周期. MVC有两个生命周期,一为应用程序生命周期,二为请求生命周期. 2.应用程序生命周期 应用程序生命周期 ...

  7. UIViewController生命周期-完整版

    一.UIViewController 的生命周期 下面带 (NSObject)的方法是NSObject提供的方法.其他的都是UIViewController 提供的方法. load   (NSObje ...

  8. angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  9. Spring中Bean的作用域、生命周期

                                   Bean的作用域.生命周期 Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).protot ...

随机推荐

  1. 微信小程序与云开发

    微信小程序基础概念 小程序云开发的三大基础能力:云数据库.云函数.云存储 Java.NodeJS.JavaScript.HTML5.CSS3.VueJs.ReactJs.前端工程化.前端架构 小程序开 ...

  2. shell脚本编程基础之自定义函数库

    脚本编程知识点 ${#VAR_NAME}:引用变量中字符的长度 A="25 90 100 120": echo ${A#* }:针对A变量,#表示从左往右,*空格表示以空格为分隔符 ...

  3. Python题库系列分享一(17道)

    1.1  到Python官方网站下载并安装Python解释器环境.1.2  到Anaconda官方网站下载并安装最新的Anaconda3开发环境.1.3  Python程序的__name__的作用是什 ...

  4. mysql 生成随机数rand()

    mysql> select rand(); +--------------------+ | rand() | +--------------------+ | 0.99134733527092 ...

  5. 【POJ2993】Emag eht htiw Em Pleh

    题目传送门 本题知识点:模拟(如果对国际象棋不熟悉的同学可以先百度一下) 本题跟POJ2996是逆过来的操作,如果做过[POJ2996]的同学就不会对题意不理解的了. (以下默认您已AC[POJ299 ...

  6. cnetos6.5安装Varnish

    安装依赖包: tar -zxvf docutils-0.13.1.tar.gz python setup.py install unzip pcre2-10.23.zip ./configure -- ...

  7. ICEM-哑铃

    原视频下载地址:https://pan.baidu.com/s/1kVBKJbT ;密码: jqeh

  8. pyqt5设置背景图片出现问题

    在使用pyqt5时,用qtdesign设置好背景图片,如何设置自行百度,预览没问题,用ptuic5转换为代码却发现显示不了: 首先:我在qtdesign中导入的是pic.qrc,但是转换的代码最后一句 ...

  9. Unity创作赛车游戏的四款插件

    本文,我们将介绍其中4款:Racing Game Starter Kit.GeNa 2 .NWH Vehicle Physics.Curvy Splines. Racing Game Starter ...

  10. Spring Boot-IntelliJ IDEA搭建SpringBoot

    点击create new project 点击next 这里基本都已经自动生成了,简单介绍下: Name:项目名称 Type:我们是Maven构建的,那么选择第一个Maven Project Pack ...