Vue生命周期钩子函数

原创 已于 2024-01-30 04:08:13 修改 · 528 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2024-01-30 03:28:21 首次发布
本文详细介绍了Vue.js中组件的生命周期阶段，包括BeforeCreate、Initinjections、Created、模板编译、beforeMount、mounted、数据变化触发的beforeUpdate、VirturalDOM渲染及updated阶段，最后是销毁阶段的注意事项。

BeforeCreate 阶段

组件创建之后遇到的第1个生命周期函数，这个阶段标签已经被加载，但是data和methods以及dom结构都都未被初始化，也就是获取不到data的值，不能调用methods中的函数

Init injections &reactivity

这个阶段中，真正初始化data和methods中的方法

Created 阶段

这个阶段组件的data和methods中的方法已初始化结束，可以访问，但是dom结构未初始化，页面未渲染，这个阶段经常发出Ajax请求

模板编译：内存完成编译模板(el/模板标签 template)

还没有挂载，用户无法看到渲染的页面

beforeMount阶段

此时内存中的模板结构还未渲染到页面上，看不到真实的数据

mounted阶段

已挂载-页面数据已经渲染完毕，用户看到的是真实的页面数据，生命周期创建阶段完毕，进入到了运行中的阶段

循环的监听数据池 data 中数据的变化

如果数据发生了变化，

触发生命周期函数 beforeUpdate

beforeUpdate阶段

当执行beforeUpdate函数，数据池的数据是新的，但是页面还是旧的

Virturl DOM re-render and patch

根据最新的data数据，重新渲染内存中的模板结构，并把渲染好的模板结构，替换至页面上

updated阶段

页面已经完成了更新，此时，data数据和页面的数据都是最新的

如果数据没有发生变化，beforeUpdate 不会被调用

销毁阶段：

注意在 beforeDestroy 阶段(数据销毁之前)，数据还可以使用

Tearddown... 注销组件、事件监听器

destroyed:        组件已经完成了销毁

史上最全的Vue生命周期钩子函数11个
在写作的路上持续输出。
04-23 2万+
什么是生命周期？ 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新， 在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数； 什么是生命周期钩子函数？ 生命周期钩子函数，能够让我们在初始化实例时，添加自己的代码； 生命周期的钩子函数中的this，会默认指向vue的实例; 什么是钩子函数？ beforeCreate created[可以..
VUE生命周期钩子函数详解
my_love_download的博客
10-10 841
生命周期钩子函数的理解 就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。其实这里的生命周期钩子函数就是生命周期函数；VUE的生命周期函数可以分为，创建、挂载、更新、销毁四个模块 1.创建 1.beforeCreate函数执行在组件创建之前,在该阶段组件未创建,组件中的data、ref均为undefined,一般在该函数中添加loading事件; 2.created函数执行在...
vue生命周期钩子函数
m0_65912225的博客
06-27 824
beforeCreate：在实例初始化后，data observer和event/watcher事件之前被调用=> created：实例已经创建完成之后调用，挂载阶段未开始，data observer，属性和方法运算，watch/event事件回调已经完成。{用来调用数据，调用方法，调用异步函数}=> beforeMount：在挂载之前被调用，相关的render函数首次被调用=> mounted：有初始值的DOM渲染，初始数据渲染完毕在这获取=> beforeUpdate：数据更新时调用，可以进一步更改状态
vue生命周期钩子函数详解
热门推荐
小熊的博客
07-26 9万+
先放一张官网生命周期图： vue有8种生命周期函数： 钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件 created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted...
vue生命周期钩子函数有哪些
IKUN__的博客
05-20 1374
每个vue实例从创建到销毁的过程就是vue的一个生命周期，每个阶段都有对应的钩子函数，当我们想在vue的不同时期操作vue实例是，就可以在不同的钩子函数中进行 vue有8种生命周期函数： beforeCreate(实例创建前) 官方解释：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 说明：这个时候this还不能使用，data中的数据、methods中的方法，以及watcher中的事件都不能获得。 created(实例创建后)
深入探究 Vue 的生命周期钩子函数
前端开发探索之旅
03-06 1780
Vue3 组件的生命周期，指的是从组件被创建、挂载到 DOM，再到数据更新、最终被销毁的整个过程。在这个过程中，Vue3 提供了一系列的生命周期钩子函数，让开发者能够在特定阶段执行自定义代码。这些钩子函数就像是在组件生命周期旅程中的一个个站点，开发者可以在这些站点上添加自己的 “任务”。Vue3 的生命周期钩子函数为开发者提供了在组件不同生命周期阶段执行自定义逻辑的能力。通过合理运用这些钩子函数，我们能够更好地控制组件的行为，实现复杂的业务逻辑，优化组件性能。
vue2 生命周期钩子函数
sunshine_cui的博客
09-21 2853
还有两个特殊的（使用keep-alive）:activated、deactivatedv2.5.0+新增 errorCaptured1.2 路由守卫全局&路由独享：beforeEach、beforeResolve(v2.5.0+新增)、afterEach;beforeEnter(路由独享，类似beforeEach)组件内：beforeRouterEnter、beforeRouterUpdate(2.2新增)、beforeLeave。
Vue生命周期钩子函数全解析
k464746的博客
03-24 1390
文章目录Vue生命周期介绍生命周期图示八个钩子函数详解先创建实例,组件,渲染在页面然后分别调用钩子函数,了解其特性及作用beforeCreat Vue生命周期介绍 Vue实例从创建到销毁的一系列过程叫做实例的声明周期。 vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发） 生命周期可分为四个阶段 创建实例...
Vue生命周期钩子函数的使用以及应用场景
她还会来吗的博客
09-09 2966
前言 昨天做项目时,由于自己对Vue的生命周期钩子函数了解的不是很到位,以至于出现了很多问题，所以便在闲暇之余写下这篇博客,加深一下对钩子函数的认知。 钩子函数介绍 话不多说，先上图！！ 初看这幅图,可能觉得这Tm是什么啊,能不能说的直白点！！！(淦),但习惯就好，这就是官方。但稍微学习一下之后,可以发现这是很简单的~ vue提供了多个生命周期函数供我们使用,分别为beforeCreate, created, beforeMount, mounted, beforeUpdate,
精选资源
(1条消息) vue生命周期钩子函数的正确使用方式_JaydenSun的博客-优快云博客_vue生命周期钩子.html
04-22
(1条消息) vue生命周期钩子函数的正确使用方式_JaydenSun的博客-优快云博客_vue生命周期钩子.html
vue 生命周期 钩子函数 keep-alive activated deactivated
global_coding的博客
06-13 2018
vue 生命周期 钩子函数 keep-alive activated deactivated
Vue 生命周期钩子函数：从创建到销毁的详细解析
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-23 1199
生命周期是指 Vue 实例从创建到销毁的全过程。Vue 提供了一系列钩子函数，这些函数可以在特定的生命周期阶段执行。例如，当一个组件实例被创建时，我们可以通过created钩子函数来初始化一些数据，而当组件即将销毁时，我们可以通过钩子函数清理一些资源。生命周期钩子函数是 Vue 组件管理和优化的关键工具。通过合理地使用生命周期钩子，我们可以确保数据在正确的时机初始化、更新和清理，从而提高性能、避免资源泄漏并使代码更加清晰和易于维护。数据初始化与请求：同步数据初始化放在created，异步请求放在。
深入解析 Vue2 的生命周期钩子函数
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-28 1102
Vue2 是一款非常易于上手的前端框架，它的组件化开发思想使得应用的构建更加高效和模块化。在 Vue 中，生命周期钩子函数是每个组件实例从创建到销毁过程中会调用的一系列函数。这些钩子函数为开发者提供了丰富的接口，以便在组件的不同阶段执行特定的操作。本文将深入解析 Vue2 中的生命周期钩子函数，并结合具体的应用场景，帮助开发者更好地理解和运用这些钩子函数，提高开发效率和代码的可维护性。创建阶段在该阶段，Vue 实例被初始化，但尚未渲染 DOM。此时，数据观测和事件配置已经完成，但组件实例还没有被挂载。
Vue3项目实战
2509_93946337的博客
11-24 357
还有个细节，Pinia的store里用actions定义方法时，不用写commit了，直接赋值就行，比Vuex简单不少。举个实际例子：订单列表页需要支持按状态筛选和导出Excel，我单独建了个useOrderTable.js，里面用ref存筛选条件，computed处理过滤后的数据，onMounted里调接口初始化。我在用户管理模块里试过，把一个权限列表从数组改成树结构，用reactive包裹后，随便增删改查都能实时渲染，连watch都不用额外配置。部署时遇到个诡异问题：开发环境跑得好好的，生产环境白屏。
Vue音频处理开发
最新发布
2509_93946247的博客
11-24 450
举个例子，在data里定义一个audioContext对象和一个isPlaying布尔值，再通过methods里的函数来触发播放或暂停，界面状态自动更新，不用手动操作DOM。另外，Vue 3的setup语法糖里，用reactive定义播放器实例，比Options API更灵活，尤其是需要动态添加音频滤镜时。记得控制帧率，太高了卡顿，太低了动画跳帧，我一般用60fps做节流。另外，音频缓冲过长会影响体验，可以用Vue的异步组件配合loading状态，先显示占位图，等解码完成再启用控制按钮。
Vue移动应用案例
2509_93942886的博客
11-24 363
从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Rockandrollman的博客
11-23 151
Vue 项目实战《尚医通》，路由鉴权完成，笔记71
Vue文档
2509_93942660的博客
11-24 289
简单说，基础类型用ref，引用类型用reactive。至于emit，现在都推荐用defineEmits定义事件类型，TypeScript支持杠杠的。遇到复杂业务逻辑时，getter能帮大忙，把计算属性抽到store里，组件代码顿时清爽不少。如果组件用了v-if，这时候元素可能还没渲染，得用nextTick兜底。比如按钮重复点击问题，用v-throttle直接解决，比在每个methods里写防抖逻辑方便多了。比如v-for和v-if的优先级问题，比如key的重要性，这些看似基础的概念往往最能考验功底。
vue生命周期 钩子函数
10-26
Vue生命周期是指Vue实例从创建到销毁的整个过程，而钩子函数则是在这个过程中被调用的一些函数。Vue生命周期钩子函数可以让我们在Vue实例的不同阶段添加自定义的逻辑代码，以便更好地控制Vue实例的行为。Vue生命周期钩子函数可以分为8个阶段，分别是：创建前、创建后、挂载前、挂载后、更新前、更新后、销毁前和销毁后。具体的钩子函数包括： 1. beforeCreate：在Vue实例创建之前调用，此时Vue实例的data和methods等属性还未初始化。 2. created：在Vue实例创建之后调用，此时Vue实例的data和methods等属性已经初始化完成。 3. beforeMount：在Vue实例挂载到DOM之前调用，此时Vue实例的template模板已经编译完成，但还未渲染到页面上。 4. mounted：在Vue实例挂载到DOM之后调用，此时Vue实例已经渲染到页面上，可以进行DOM操作。 5. beforeUpdate：在Vue实例更新之前调用，此时Vue实例的data数据已经发生变化，但还未更新到DOM上。 6. updated：在Vue实例更新之后调用，此时Vue实例的data数据已经更新到DOM上。 7. beforeDestroy：在Vue实例销毁之前调用，此时Vue实例还未销毁，可以进行一些清理工作。 8. destroyed：在Vue实例销毁之后调用，此时Vue实例已经被销毁，无法再进行任何操作。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值