介绍

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. 石子合并(NOI1995)题解

    题目描述 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1个算法,计算出将N堆石子合并成1 ...

  2. linux命令之------Cat命令

    Cat命令 作用:cat命令用于连接文件并打印,查看文件内容: -n或--number:由1开始对所有输出的行数编号: -b或--number-nonblank:和-n相似,只不过对于空白行不做编号: ...

  3. 微信小程序 wxs的简单应用

    Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...

  4. Intellij IDEA 自动清除无效 import 和 清除无效 import 的快捷键

    可以settings-general-auto import-java项,勾选optimize imports on the fly,在当前项目下会自动清除无效的import,而且这个是随时自动清除的 ...

  5. Java 自定义异常

    新建类CustomException继承 Exception /** * Create by on 2019-07-30 * 自定义类需要继承Exception * @author lsw */ pu ...

  6. 请简述web开发中的兼容问题

    1,浏览器默认的内外边距不一样,所以用通用选择器*设置margin和padding来设置.2,块标签设置浮动后,有设置margin的情况下,在ie6下的margin比别的浏览器大.3,img标签会有默 ...

  7. Python实例100个(基于最新Python3.7版本)

    Python3 100例 原题地址:   http://www.runoob.com/python/python-100-examples.html    git地址:    https://gith ...

  8. pip的安装

    1.get-pip.py安装 (官方)https://pip.pypa.io/en/stable/installing/#installing-with-get-pip-py $wget https: ...

  9. 【NumPy】 之常见运算(np.around、np.floor、np.ceil、np.where)

    aroundnp.around 返回四舍五入后的值,可指定精度. around(a, decimals=0, out=None) a 输入数组 decimals 要舍入的小数位数. 默认值为0. 如果 ...

  10. Cucumber介绍

    Cucumber是一个提供能让我们都理解的普通语言,通过普通语言来描述的测试用例,并支持行为驱动开发的测试工具.Cucumber支持大多数变成语言,如Ruby.Java和Python等. 官方地址:h ...