说一下vue生命周期钩子函数有哪些，分别什么时候触发

最新推荐文章于 2024-04-10 18:01:45 发布
最新推荐文章于 2024-04-10 18:01:45 发布
阅读量2.2k 收藏 8
点赞数 1
分类专栏： vue javascript 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45324956/article/details/117306477
版权

vue生命周期即为一个组件从出生到死亡的一个完整周期，主要包括以下4个阶段：创建，挂载，更新，销毁

   创建前：beforeCreate,  创建后:created

   挂载前：beforeMount,  挂载后：mounted

   更新前：beforeUpdate,  更新后：updated

   销毁前：beforeDestroy, 销毁后：destroyed

我平时用的比较多的钩了是created和mounted，created用于获取后台数据，mounted用于dom挂载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等,

另外还新增了使用内置组件 keep-alive 来缓存实例，而不是频繁创建和销毁(开销大)
actived 实例激活
deactived 实例失效

以下为详解版,大家理解就ok:

生命周期钩子函数（
最低0.47元/天 解锁文章
unither
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue生命周期总结（四个阶段，八个钩子函数）
小宇，要努力敲代码
10-25 5万+
生命周期就是组件或者实例，从创建到被销毁（初始化化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载）的一系列过程，我们称这是Vue的生命周期。
vue-钩子函数
weixin_43503730的博客
06-23 1654
vue-钩子函数 钩子函数：允许我们定义vue，在特定的时期执行其他事情 vue中的钩子函数包括： 生命周期钩子函数 路由的钩子函数 自定义指令的钩子函数 生命周期的钩子函数 生命周期阶段 3个：加载期、更新期、销毁期 4个：初创期、挂载期、更新期、销毁期 生命周期钩子函数 beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 created 在实例创建完成后被立即调用 beforeMount 在挂
Vue生命周期详解（八个钩子）
最新发布
m0_74995879的博客
04-10 1320
一个Vue实例从开始创建一直到销毁的整个过程，称之为生命周期
生命周期和钩子函数解析
weixin_58437923的博客
04-27 2231
首先解释一下什么是生命周期，类比一下，如同人的一生有幼儿期、青春期、更年期、老年期一样，Vue.js代码的运行也有一个类似的周期，这里称之为生命周期。生命周期就如同一个有序的流程，就像代码从下往上运行一样，想象一下是不是就像一条挂起来的绳索从上往下，但是在绳索上面每间隔一段距离就有一个挂钩，可以从上往下在挂钩上面挂上物品，称之为钩子函数。在每个阶段运行的代码就是钩子函数的大括号包裹的代码。 一个完整的生命周期大约有十多个钩子函数，分别为beforeRouteLeave、beforEach、beforeEnt
Vue中组件生命周期中涉及的钩子函数
zhangxiaojiong_zh的博客
05-13 1053
一. 钩子函数简要说明 beforeCreate与created (1) beforeCreate 为组件完全创建前调用的函数，使用不多，但常用于定时器； (2) created 为组件完全创建后调用的函数，此时可以获取后端数据然后对组件中的数据属性进行赋值以渲染视图层； (3) 案例：在组件Test中，beforeCreate中打印Test组件的testMsg的值显示undefined，但是在created中打印该值却能成功输出； beforeMount与mounted (1) beforeMount
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
Vue.js 是一款流行的前端框架，它的核心特性之一就是丰富的生命周期钩子函数，这些钩子使得开发者可以在组件的不同阶段执行特定的逻辑。本文将深入探讨Vue的钩子函数，特别是路由导航守卫和`keep-alive`组件，以及...
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一、什么是钩子函数？ 钩子函数...
Vue生命周期钩子的理解
01-08
组件的生命周期钩子函数大致可以分为三个阶段：初始化 、进行中 、 销毁。 1、初始化：beforecreate – create – beforeMount – mounted // 一个组件或者实例的生命周期都是通过new开始的 // 实例化之后，内部...
浅谈vue生命周期共有几个阶段？分别是什么？
10-14
Vue.js的生命周期是指一个Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有特定的任务和可调用的钩子函数。Vue实例在生命周期中的不同阶段，执行不同的操作，例如数据绑定、DOM操作、事件处理等。了解...
vue 生命周期函数
12-21
Vue组件从创建到销毁的过程可以分为几个阶段，每个阶段都有对应的生命周期钩子函数，开发者可以利用这些钩子来执行特定的任务。主要包括： - **创建阶段**：`beforeCreate` - 在实例初始化之后，数据观测（data ...
Vue生命周期的钩子函数有哪些，分别作用是什么？
姗姗的博客
09-03 8484
1、VUE生命周期是VUE实例化或者组件创建到消亡的过程。 2、 beforeCreate 创建前的状态，初始化事件和生命周期。 3、创建完毕状态Init (初始化) injections (依赖注入) & reactivity (开始响应)。 4、beforeMount 挂载前状态， 是否有元素el，是否有模板，是否渲染到了函数内，是否作为模板进行了outerHTML渲染到了页 ...
Vue生命周期与常见的八个钩子函数的解释
qq2276031的博客
10-29 2771
首先，每一个vue实例都有一个完整的生命周期，也就是从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 这是官方文档上的图片很熟悉： 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解: beforeCreate created beforeMount mounted beforeUpdat
Vue.js2.0的生命周期及钩子函数介绍
Lookuptosky的博客
04-28 290
Vue的生命周期钩子函数介绍 什么是钩子函数 ​ 钩子函数是一个事件触发时，在系统级捕获到了它，然后做的一些操作。“钩子”就是在某个阶段给你一个做某些处理的机会。 特点： ​ 1、是函数，在系统消息触发时被系统调用； ​ 2、不是用户自己出发的； ​ 3、钩子函数的名称是确定的，当系统消息触发时自动调用； vue生命周期共分为四个阶段 1：实例创建 2：DOM渲染 3：数据更新 4...
Vue.js 组件的生命周期函数钩子有哪些？
qq_39280289的博客
09-28 166
8个钩子： 创建Create: beforeCreate(), created() 挂载Mount: beforeMount(), mounted() 更新update: beforeUpdate(), updated() 销毁destroy: beforeDestroy, destroyed()
Vue生命周期函数8个（每个钩子函数可以做什么、执行顺序）
m0_57142556的博客
05-20 1845
Vue生命周期函数8个（每个钩子函数可以做什么、执行顺序） Vue生命周期函数有四个阶段：①实例创建之前/之后、②组件挂载之前/之后、③数据改变视图更新之前/之后、④实例销毁之前/之后 ①实例创建之前/之后： beforeCreated(实例创建之前)：每个页面都是一个Vue实例,这时实例还没创建,所以data还不知道,也不能用watch监听, 这时data和methods的钩子函数都不能使用; created(实例创建之后)：实例已经创建完，可以得到data,调用watch,但是页面..
什么是Vue生命周期？Vue生命周期的作用是什么？vue八种钩子函数
someday____的博客
09-01 2744
vue生命周期是指vue对象从创建到销毁的过程。也就是vue对象从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载这一系列过程。其作用是在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。每个生命周期都会执行特殊的函数，我们把这些函数称为钩子函数。Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。...
vue.js基础学习（生命周期钩子函数）
qq_58866450的博客
08-24 1094
基础入门：vue.js生命周期钩子函数
vue的生命周期
a754334599的博客
04-26 470
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id.
【前端框架学习】生命周期函数 中 组件运行与销毁时的钩子函数
Jerry‘s word
01-30 6059
摘要
vue生命周期钩子函数
05-30
Vue组件的生命周期钩子函数包括以下几个： 1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2. created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。 4. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。实例已经完成以下的配置：编译模板，把 data 和 render 函数生成虚拟 DOM，完成挂载阶段将虚拟DOM渲染为真实DOM。 5. beforeUpdate：在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前，可以在该钩子函数中进一步地更改状态，不会触发附加的重渲染过程。 6. updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。 7. beforeDestroy：在实例销毁之前调用。实例仍然完全可用。 8. destroyed：在实例销毁之后调用。该钩子函数被调用后，组件指示已经完全销毁。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值