Vue的生命周期和钩子函数

已于 2022-02-10 18:30:53 修改
阅读量1.6k 收藏 8
点赞数 1
分类专栏： 前端 # vue 文章标签： vue.js
于 2022-02-10 17:50:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38192427/article/details/122866081
版权
Vue组件经历从创建到销毁的过程，期间有多个关键节点，被称为生命周期。每个Vue实例在这些节点上会调用特定的钩子函数，如初始化数据、编译模板、挂载DOM和数据更新等。通过理解这些生命周期钩子，开发者可以在适当的时候插入自定义代码，以实现特定的功能。流程图和实际代码示例进一步帮助我们深入理解这些钩子函数的运行机制。
摘要由CSDN通过智能技术生成

目录

Vue 的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

通俗地来说 vue 的生命周期：就是 vue 实例从创建到销毁的过程，我将这个过程中的一些关键点抽取出来，简化为下面这个流程图

在这里插入图片描述

Vue 的生命周期与钩子函数

vue 2.0 提供了一系列钩子函数，这些函数和生命周期的各个阶段一一对应

在这里插入图片描述

钩子函数 描述
beforeCreate 在实例初始化之后，数据观测（data observer）
和 event/watch事件配置之前被调用
created 在实例创建完成后立即被调用，在这一步实例已经完成了：
数据观测、属性和方法的运算和 event/watch事件的回调，
但是$el属性目前不可见。
beforeMount 在挂载开始之前被调用
mounted 在挂载成功后被调用，el被新创建的vm.$el替换
beforeUpdate 数据更新之前调用
update 数据更新完成时调用，组件dom已经更新
activated 组件被激活时调用
deactivated 组件被移除时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

结合代码理解钩子函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
最低0.47元/天 解锁文章
桐花思雨
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的生命周期及钩子函数
wasdf231的博客
06-26 397
Vue生命周期是指vue实例对象从创建之初到销毁的过程，共用八个钩子函数
Vue 2.0中生命周期与钩子函数的一些理解
08-30
在 Vue 2.0 中，生命周期和钩子函数是两个非常重要的概念，它们之间存在紧密的联系，理解它们可以帮助开发者更好地使用 Vue.js 框架。本文将详细介绍 Vue 2.0 中的生命周期和钩子函数，以及它们之间的关系。 一、...
vue钩子函数（软文）
热门推荐
勿忘初心
06-21 1万+
前言：钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。一、vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了，总结一下，对官方文档的那张图简...
Vue2.0 探索之路——生命周期和钩子函数的一些理解
weixin_33984032的博客
01-04 228
前言 在使用vue一个多礼拜后，感觉现在还停留在初级阶段，虽然知道怎么和后端做数据交互，但是对于mounted这个挂载还不是很清楚的。放大之，对vue的生命周期不甚了解。只知道简单的使用，而不知道为什么，这对后面的踩坑是相当不利的。 因为我们有时候会在几个钩子函数里做一些事情，什么时候做，在哪个函数里做，我们不清楚。 于是我开始先去搜索，...
vue生命周期和钩子函数分析
weixin_44749729的博客
08-18 196
生命周期 生命周期简介 先来两张祖传图：
VUE生命周期和钩子函数
m0_64547652的博客
06-16 138
生命周期首先先new Vue，这个时候还不算生命周期的开始；然后初始化事件，这个时候才算是生命周期的开始；再接着将数据挂载到实例中（所谓的挂载就是把数据放进去然后进行监听）；然后检查是否有el参数，如果有就继续，如果没有就等待实例.$mount(el)参数过来，接着检查是否有template，如果有就将template进行编译，如果没有就编译el.outerHTML为要显示的内容；检查完template编译以后，接下来就给实例挂载$el参数，$el的值就是要显示的内容，将$el替换掉整个el，然后就可以访问
vue生命周期与钩子函数简单示例
12-29
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net vue生命周期与钩子函数...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在实际开发中，可以通过合理利用这些生命周期钩子，在组件的不同阶段插入我们的业务逻辑代码，以满足各种需求。例如，在`created`钩子中可以发起Ajax请求获取数据，在`mounted`钩子中可以操作DOM，在`beforeDestroy`...
vue得生命周期函数探索
flymoringbird的博客
08-31 164
转载于：https://www.cnblogs.com/xiaobaibubai/p/8383952.html 前言： 钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。 一、...
Vue 生命周期和钩子函数
modao的博客
07-14 117
vue从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
Vue生命周期及其钩子函数
ORANGEFISHs的博客
06-21 4425
Vue生命周期及其钩子函数
vue：生命周期
duansamve的博客
07-07 185
生命周期探究对于执行顺序和什么时候执行，看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。&lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model...
Vue【六】vue生命周期（钩子函数）
小祥编程擅长前端
11-20 1500
Vue【六】vue生命周期（钩子函数），生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行，不需要手动调用。生命周期 => 一个事物从出生 到 消亡的全部过程本文主要讲了vue基础语法中的生命周期（钩子函数）。
vue生命周期及钩子函数理解
weixin_44209472的博客
03-20 338
什么是vue？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue钩子函数 1.beforeCreate 创建前执行（...
深入理解Vue.js生命周期与钩子函数
前端开发工程师
10-23 8533
组件每个阶段它的内部构造是不一样的，所以一般特定的钩子做特定的事，比如`Ajax`获取数据就可以在`mounted`阶段。从`Vue`实例被创建开始到该实例最终被销毁的整个过程叫做`VUE`的生命周期，在这个生命周期内发生了下面的事情：从`vue`实例被创建开始，首先`vue`实例被创建，之后开始数据的初始化，编译模板，挂载`dom`，渲染`dom`,更新对象属性，渲染`dom`，解绑销毁。
vue生命周期钩子函数
admin_djp的博客
12-28 304
文章目录前言一、vue的生命周期是什么二、vue生命周期钩子执行顺序 前言     vue所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义 一、vue的生命周期是什
vue的生命周期和钩子函数
Cs_sssss的博客
06-28 210
vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法，我们给这些方法起了个名字叫做钩子函数或是组件钩子。 vue的生命周期分三个阶段：初始化、运行中、销毁。其中，初始化有4个钩子函数，分别是beforeCreate（实例创建前）、created（实例创建完成之后）、beforeMount（组件挂载前）、mounted（组件挂载后）。运行中有两...
vue生命周期和钩子函数的一些理解
evior
03-30 476
一、官网的声明周期图片二、vue1.0与vue2.0生命周期函数介绍三、案例详解1、简单的案例&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/vu
vue生命周期和钩子函数
最新发布
09-13
Vue的生命周期指的是组件从创建、挂载、更新到销毁的整个过程。而钩子函数则是在生命周期的不同阶段执行的回调函数。 Vue组件的生命周期包括以下阶段和对应的钩子函数： 1. 创建阶段： - `beforeCreate`：在实例被创建之初，数据观测和事件配置之前调用。 - `created`：实例已经创建完成，数据观测和事件配置完成，但尚未挂载到页面上。 2. 挂载阶段： - `beforeMount`：在挂载开始之前被调用，即将开始编译模板，并将模板替换为渲染函数。 - `mounted`：实例被挂载到页面上并完成渲染，此时组件DOM已经生成。 3. 更新阶段： - `beforeUpdate`：数据更新时，虚拟DOM重新渲染之前被调用。 - `updated`：虚拟DOM重新渲染并应用更新后调用。 4. 销毁阶段： - `beforeDestroy`：在实例销毁之前调用，此时实例仍然完全可用。 - `destroyed`：实例销毁后调用，此时实例已经不可用。 另外还有一些其他的钩子函数可以使用，如`activated`和`deactivated`用于Vue的keep-alive组件、`errorCaptured`用于捕获子孙组件的错误等。 钩子函数可以在组件中直接以方法的形式定义，并在相应的生命周期阶段被自动调用。这些钩子函数可以用于执行一些特定的操作，如数据初始化、异步请求、订阅事件等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值