首页 > 其他分享 >Vue3.0 生命周期

Vue3.0 生命周期

时间:2022-12-21 20:33:10浏览次数:40  
标签:生命周期 实例 DOM 调用 Vue3.0 组件 mounted

所有生命周期钩子的this上下文都是绑定至实例的。

  • beforeCreate:在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。
  • created:实例创建完成,主要包括数据帧听、计算属性、方法、事件/侦听器,(注意:由于挂在阶段还未开始,因此$el还不可用)。
  • beforeMount:挂在之前调用,render函数首次调用。
  • mounted:实例挂在完成后调用,(注意,mounted不会保证所有子组件都已挂载完成,可以使用$nextTick())。
  • beforeUpdate:数据发生改变之后,DOM被更新之前调用。
  • updated:在数据更改导致的虚拟DOM重新渲染和更新完毕之后调用(注意,updated不会保证所有子组件都已挂载完成,可以使用$nextTick())。
  • activated:被keep-alive缓存的组件激活时 调用。
  • deactivated:被keep-alive缓存的组件失活时调用。
  • beforeUnmount:在组件实例卸载之前调用。
  • unmounted:组件实例卸载之后调用(注意,实例所有指令都被解绑,所有侦听器都被移除,所有子组件实例都被卸载)。
  • errorCaptured:在捕获一个来自后代组件的错误时被调用(可以返回false可以阻止该错误继续向上传播。)。
  • renderTracked:跟踪虚拟DOM重新渲染时调用,可用来查看哪个操作跟踪了组件及该操作的目标对象和键。
  • renderTriggered:当虚拟DOM重新渲染被触发时调用,用来监听什么操作触发了重新渲染以及该操作的目标对象和键。

其实一般情况下用的最多的就是组件创建期间的一些声明周期钩子,比如:created、mounted、beforeUnmount(Vue 2.x版本中是beforeDestroy)等,其他的主要就是稍微了解一下,用的时候再看(手动哭笑)。

补充点:setup作为组合式API入口点,其调用时间是在创建组件实例时,在初始 prop 解析之后立即调用。在生命周期方面,它是在beforeCreate钩子之前调用的。

选项式API的生命周期选项与组合式API之间的映射

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted ;
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • activated -> onActivated
  • deactivated -> onDeactivated
  • beforeUnmount -> onBeforeUnmount
  • unmounted -> onUnmounted
  • errorCaptured -> onErrorCaptured
  • renderTracked -> onRenderTracked
  • renderTriggered -> onRenderTriggered

标签:生命周期,实例,DOM,调用,Vue3.0,组件,mounted
From: https://www.cnblogs.com/liangzailiu/p/16997189.html

相关文章

  • .Net Core 三个常用的生命周期(transient/scope/singleton)
    1、单例(AddSingleton:注入一次,一直有效)区别:服务在第一次请求时被创建,后边再次请求都会沿用这个已创建的服务。2、作用域(AddScoped:在一定的区域内有效)区别:服......
  • 变量的生命周期
    全局变量inta=0; //intmain(){return0;}局部变量voidAAA(void){inta=0;//程序运行完就会被销毁}voidaaa(){staticinta=0;//程序运行完不会被销毁}constinta=0......
  • 华为云APIArts:API全生命周期一体化解决方案,帮助您端到端呵护您的API
    摘要:华为云APIArts是API设计、API开发、API测试、API托管、API运维、API变现一体化协作平台,通过维护API各开发阶段数据高度一致,支持开发者高效实现API全流程一站式体验。​......
  • Spring Bean 的生命周期笔记
    1.加载Bean定义通过loadBeanDefinitions扫描所有xml配置、注解将Bean记录在beanDefinitionMap中2.创建Bean对象通过createBean遍历beanDefinitionMap创建bean2.1......
  • k8s原理之-Pod状态和生命周期管理
     一、什么是Pod?Pod是kubernetes中你可以创建和部署的最小也是最简的单位。一个Pod代表着集群中运行的一个进程。Pod中封装着应用的容器(有的情况下是好几个容器),存储......
  • Elasticsearch 入门实战(6)--索引生命周期管理
    索引生命周期管理(Indexcyclemanagement:ILM) 是在 Elasticsearch 6.7版正式推出的一项功能,它是Elasticsearch的一部分,主要用来帮助管理索引。1、简介如果你要处......
  • Eolink神技之二、API全生命周期管理
    Eolink神技之二、API全生命周期管理目录​​Eolink神技之二、API全生命周期管理​​​​Eolink全API全生命周期管理解决的问题​​​​演示过程​​​​一、创建项目文档​......
  • 09.泛型、trait与生命周期
    一、删减重复代码fnmain(){letnumber_list=vec![34,50,25,100,65];letmutlargest=number_list[0];fornumberinnumber_list{......
  • VUE的实例的生命周期
    3.Vue实例的生命周期3.1什么是Vue实例的生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染→更新→渲染、卸载等一系......
  • vue3.0--<script setup>的使用
    1.<scriptsetup>的定义<scriptsetup> 是在单文件组件(SFC)中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的 <scr......