Vue3生命周期函数的那些事

前言

这篇文章给大家介绍关于Vue3中生命周期函数的问题
使用过Vue3的朋友都知道，随着 composition API 的引入，我们在使用钩子函数上也发生了一些改变

Vue3的生命周期函数

下面告诉大家vue2和vue3的生命周期函数改变了哪些：
vue2 —> vue3:

beforeCreate -> 不需要
created -> 不需要
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered

可以看到在vue3中是没有 beforeCreate 和 created 函数的，这两个函数的方法在vue3里都写在 setup 方法中

生命周期函数的使用

在Vue3中使用生命周期函数需要先进行导入，例如：

import { onMounted, onUpdated, onRenderTriggered } from 'vue'

导入之后，我们可以在setup()中进行访问

setup() {onMounted(() => {console.log('mounted')})onUpdated(() => {console.log('updated')})onRenderTriggered((event) => {console.log(event)})
}

最后在Vue3中关于生命周期函数的更多完整内容，可以参考官方文档，帮助大家深入了解 —> 生命周期函数

Vue3生命周期函数的那些事相关推荐

Vue3生命周期函数
Vue3生命周期函数与vue2的对比: Vue3的setup语法糖直接代替beforeCreate,Created:Destroy更名为Unmount:其他就是直接加on beforeCreate - ...
vue3.0生命周期函数
什么是生命周期: vue中每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在vue2.x中的生命周期为 before ...
五十七、Vue中的八大生命周期函数
@Author:Runsen @Date:2020/10/15 什么是vue生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载DOM-渲染.更新-渲染 ...
Vue2.和Vue3.生命周期的区别，对比。详解生命周期中的每个钩子函数，setup,
文章目录 #1.Vue2.的生命周期与Vue3.的生命周期对比图 #1.1白色背景图是Vue2.的生命周期,黑色背景图是Vue3.的生命周期. #2.Vue2.与Vue3.的生命周期函数的不同 #2. ...
Vue3 生命周期Hooks函数与调度器Scheduler的原理
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群写在最前:本文章的目标 Vue3的生命周期的实现原理是比较简单的,但要理解整个Vue3的生命 ...
Vue 生命周期函数
Vue 生命周期函数代码解释 <!DOCTYPE html> <html> <head><title>钩子函数</title><me ...
React教程（五）——生命周期函数
生命周期函数,是react框架的难点内容,你要知道,每一个生命周期函数是干什么的?它们的使用场景是什么?当某一种条件下,它们有着怎样的执行顺序?每一个生命周期函数,应该注意的点是什么? react中, ...
Vue生命周期函数(详解)
什么是Vue生命周期? Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载 Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. Vu ...
前端学习之vue的生命周期函数
一.什么是生命周期函数我想,对于生命周期,咱都不会陌生,所谓生命周期,就是一个过程,从开始到结束,顾名思义,就像生命一样,从诞生到消逝.而生命周期函数,就是在这个生命周期的不同阶段中会被调用的函数, ...

Vue3生命周期函数的那些事

前言

Vue3的生命周期函数

生命周期函数的使用

Vue3生命周期函数的那些事相关推荐

最新文章

热门文章