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

vue3.0生命周期

时间:2024-10-23 22:20:42浏览次数:5  
标签:生命周期 DOM 钩子 调用 vue3.0 渲染 组件 服务端

最近要面试,复习一下生命周期的知识点:

beforeCreate

在组件实例初始化完成之后立即调用

created

在组件实例处理完所有与状态相关的选项后调用。

当这个钩子被调用时,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此 $el 属性仍不可用。

beforeMount

在组件被挂载之前调用。

当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

这个钩子在服务端渲染时不会被调用.

 

mounted

在组件被挂载之后调用。

组件在以下情况下被视为已挂载:

  • 所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件,图片资源)

  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

这个钩子在服务端渲染时不会被调用.

 

beforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

这个钩子在服务端渲染时不会被调用.

 

updated

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

父组件的更新钩子将在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick() 作为替代。

这个钩子在服务端渲染时不会被调用。

 

beforeUnmount

在一个组件实例被卸载之前调用。

当这个钩子被调用时,组件实例依然还保有全部的功能。

这个钩子在服务端渲染时不会被调用。

 

unmounted

在一个组件实例被卸载之后调用。

 

一个组件在以下情况下被视为已卸载:

  • 其所有子组件都已经被卸载。

  • 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用,例如计时器、DOM 事件监听器或者与服务器的连接。

 

activated

若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。

这个钩子在服务端渲染时不会被调用。

 

deactivated

若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用。

 

 

Nuxt 

静态站点生成器

 

标签:生命周期,DOM,钩子,调用,vue3.0,渲染,组件,服务端
From: https://www.cnblogs.com/baota/p/18498386

相关文章

  • 化繁为简,使用 ADManager Plus 简化账户生命周期管理
    在IT环境中,编排指的是对工作流、应用程序和系统的协调管理,旨在通过简化流程来优化业务性能。IT管理员可以通过编排,从单个控制台自动执行一系列任务,例如预配账户帐户、数据库管理、事件处理、应用程序和云资源管理。编排对支持分布于本地和云端的IT服务的大型工作流至关重要。......
  • React 类组件的生命周期
    React类组件的生命周期可以分成三个阶段:挂载(Mounting)阶段:当组件实例被创建并插入DOM中时,会调用的方法。更新(Updating)阶段:当组件的props或state发生变化时会调用的方法。卸载(Unmounting)阶段:当组件从DOM中移除时会调用的方法。以下是每个阶段典型的生命......
  • npm 生命周期
    npm生命周期是指在执行npm命令时,特定阶段会自动触发的脚本。这些生命周期脚本可以帮助开发者在不同的安装和管理过程中的特定时刻执行自定义命令。主要生命周期脚本以下是常见的npm生命周期脚本:preinstall:在安装依赖之前执行。install:在安装依赖时执行。pos......
  • 探索ArkWeb的奥秘:架构了解与生命周期管理
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。ArkWeb(方舟Web)是华为鸿蒙Harmon......
  • Vue学习之路10----生命周期
    (以下图片来自官网)<template><div>{{num}}</div><button@click="num++">add</button></template><scriptsetupname="App">import{ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBefore......
  • vue(vue.js)—生命周期(1)
    原文链接:vue(vue.js)—生命周期(1)–每天进步一点点vue也有自己的生命周期。数据初始化的生命周期如下:beforeCreate、created、beforeMount、mounted1.beforeCreate此时,无法通过vm访问data中的数据,methods中的方法。2.created此时,可以通过vm访问到data中的数据,methods中配......
  • 简单说说 Bean的生命周期源码
    在spring中核心进行bean的初始化的方法是AbstractAutowireCapableBeanFactory类的doCreateBean方法,生命周期的全部大致流程都在这里进行了描述分别是:1创建实例;2填充属性3初始化//AbstractAutowireCapableBeanFactory类//创建bean的过程protectedObjectdoCreateB......
  • 【Vue】Vue3.0(十三)中标签属性ref(加在普通标签上、加在组件标签上)、局部样式
    上篇文章:【Vue】Vue3.0(十二)、watchEffect和watch的区别及使用......
  • UIAbility组件生命周期
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(MaoistLearning)➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ )➤GitHub地址:https://github.com/strengthen➤原文地址:https://www.cnblogs.com/strengthen/p/......
  • Unity生命周期
    基础概念游戏的本质就是一个死循环,每一次循环都会处理游戏逻辑并更新一次游戏画面之所以能看到画面在动,是因为切换画面速度达到一定速度时人眼就会认为画面是动态且流畅的一帧就是执行了一次循环,Unity底层已经封装好了这个死循环我们只需要利用Unity的生命周期函数的规则来执行游......