Vue 生命周期详解

最新推荐文章于 2024-06-19 11:11:55 发布
最新推荐文章于 2024-06-19 11:11:55 发布
阅读量201 收藏
点赞数
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36947128/article/details/81915790
版权

beforeCreate:组件实例刚被创建，组件计算属性之前，如data属性（el和data都不存在）

created:组件实例创建完成，但Dom还未生成，$el属性还不存在(data数据初始化完成，但是Dom还没有渲染，el属性不存在)

beforeMount:模板编译/挂载之前（完成了el和data的初始化，Dom已经被渲染）

mounted:模板编译/挂载之后（完成挂载）

beforUpdate:组件更新之前

updated:组件更新之后

beforeDestroy:组件销毁前调用

destroyed:组件销毁后调用

 

作用：

beforeCreate:可以在这里加loading事件

created:在这里结束loading，还可以做一些初始化，实现函数自执行,也可以放一些后端请求

mounted：在这里发起后端请求，拿到数据，对变量进行赋值等操作

爱吃排骨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期总结
weixin_42823014的博客
03-30 2万+
一、vue生命周期 vue生命周期是什么？ Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。 vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、dest
关于Vue生命周期详解
10-29
Vue生命周期主要包括以下几个关键阶段： 1. **初始化与创建**： - `beforeCreate`：在实例刚刚创建时被调用，此时数据观测(data observer)和属性(props)已经被设置，但数据尚未初始化，因此在这个阶段访问不到数据...
Vue生命周期详解
m0_58709145的博客
10-18 1万+
1.Vue实例从创建到销毁的这一过程叫做vue的生命周期.2.过程:开始创建—>初始化数据—>编辑模板—>挂载DOM($el)---->UI渲染—>数据更新---->卸载。
Vue3总结
最新发布
D_A_I_H_A_O的博客
06-19 720
一、初识VUE3 二、再识VUE3-MVVM 三、VUE3数据代理 四、VUE3事件处理 五、VUE3计算属性 六、Vue3监视属性 七、VUE3过滤器 七、VUE3内置指令 九、VUE3组件 十、VUE3生命周期
Vue都使用那么久了，还不了解它的生命周期吗
CRMEB小程序商城的博客
11-25 6023
前言 我记得尤大曾经说过，你看Vue源码干嘛？你使用Vue又不需要它的源码，你只需要会用就行了！ 但是我们得卷啊，不卷怎么脱颖而出????，我还记得在今年的蓝桥杯群里，有一同届的还不知道哪个大学的哥们，已经在读Vue/React/Node的源码了…作为小菜鸡的我看着大佬侃侃而谈，在群角落里瑟瑟发抖。 最近有在牛客上复习Vue的知识，整理出这篇文章，一是方便自己未来复习，二是希望能够帮助一些跟我一样的朋友们复习一边知识点，学习在什么时候都不晚。 这篇文章会讲到： Vue的生命周期到底是什么 Vue生命周期的
vue的生命周期
杨欢博的博客
11-08 888
什么是生命周期 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、 渲染→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创 建到销毁的过程，就是生命周期。 vue的八个生命周期 1. beforeCreate 创建之前 实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate 钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的 dom，一般不做操作 2.
【前端】Vue生命周期函数（详细讲解+中文图解）
山赶着山，山山漫漫结成关
08-09 1万+
Vue生命周期函数（详细讲解+中文图解）
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
Vue生命周期示例详解
08-30
在深入理解Vue生命周期之前，我们需要了解一些基本概念，如组件、数据绑定和Vue实例。 Vue生命周期涉及到的主要阶段包括： 1. **beforeCreate**：在实例被创建后，但数据观测（data observer）和属性及方法...
vue实例的生命周期详解
04-24
vue生命周期
vue 八大生命周期
m0_57138227的博客
10-20 6万+
1. beforeCreate（创建前） 2. created （创建后） 3. beforeMount (载入前) 4. mounted （载入后） 5. beforeUpdate （更新前） 6. updated （更新后） 7. beforeDestroy（ 销毁前） 8. destroyed （销毁后）
vue生命周期
热门推荐
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
vue八大生命周期
栗子不听话的博客
12-17 2392
vue八大生命周期 从Vue实例创建、挂载、更新、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期。而生命周期中的各种事件被称为生命周期钩子函数。 创建阶段：第一次页面加载的时候执行（一次性） beforeCreate 创建前 created 创建后 挂载阶段：第一次加载的时候执行（一次性） beforeMount 挂载前 mounted 挂载后 当组件被展示在html中的时候。用于自动发起请求等操作。 更新阶段 无论是自己还是父级组件，当data或props的数据被修改时触发 该阶
vue基础用法和生命周期
HaoTiantian1的博客
07-22 161
一、vue.js是什么 vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 二、声明式渲染 vue.js得核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统 现在的数据和DOM已经被建立了关联，所有东西都是响应式的。 三
vue生命周期钩子函数
jzyhc的博客
11-13 4460
vue中的生命周期【钩子函数详细用法】 beforeCreate：初始化之前 beforeCreate(){ console.log('1-beforeCreate 初始化之前'); } created：初始化完成 created(){ console.log('created初始化完成'); } beforeMount：挂载之前
关于vue里页面的缓存
乐~的博客
03-07 4万+
keep-alive是vue内置的一个组件，可以使被它包含的组件处于保留状态，或避免被重新渲染。 用法: 运行结果描述： input输入框内，路由切换输入框内部的内容不会发生改变。 常见的用法：（下图是在https://www.cnblogs.com/sysuhanyf/p/7454530.html截的图，本篇文章为了自己方便查看。） 在keep-alive标签内部添加 inclu...
vue 生命周期 应用场景 概述
我叫陈小皮。
03-22 7093
鉴于总结别人的面试经验，当提到vue项目的时候或者公司做vue项目的时候，笔试题或者面试题都会问问vue的生命周期，然而平时的项目中却很少关注这件事，今天来总结一下： 此处先挂上官网的 生命周期图 vue的生命周期（开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染、卸载）主要分为八个阶段： beforeCreate（创建前） created（创建后） beforeM...
vue生命周期 详解和代码演示
07-12
Vue.js 是一个流行的 JavaScript 框架，它有一套完整的生命周期钩子函数，用于在组件的不同阶段执行特定的操作。下面是 Vue 组件的生命周期钩子函数及其对应的阶段： 1. beforeCreate: 在实例被创建之前调用，此时 data 和 methods 等属性还未初始化。 2. created: 在实例创建完成后调用，此时可以访问 data 和 methods，并可以进行一些初始化操作。 3. beforeMount: 在编译模板之前调用，此时模板还未被渲染成真实的 DOM。 4. mounted: 在编译模板之后调用，此时模板已经被渲染成真实的 DOM，并且可以进行 DOM 操作。 5. beforeUpdate: 在数据更新之前调用，此时可以进行一些更新准备工作。 6. updated: 在数据更新之后调用，此时 DOM 已经被更新。 7. beforeDestroy: 在实例销毁之前调用，此时实例仍然可用。 8. destroyed: 在实例销毁之后调用，此时实例及其所有的监听器都已被移除。 下面是一个简单的示例代码，演示了 Vue 组件的生命周期函数的使用： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Lifecycle Demo</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue!' }, beforeCreate() { console.log('beforeCreate hook') }, created() { console.log('created hook') }, beforeMount() { console.log('beforeMount hook') }, mounted() { console.log('mounted hook') }, beforeUpdate() { console.log('beforeUpdate hook') }, updated() { console.log('updated hook') }, beforeDestroy() { console.log('beforeDestroy hook') }, destroyed() { console.log('destroyed hook') } }) </script> </body> </html> ``` 你可以在浏览器中打开该示例，然后在控制台中查看不同生命周期阶段的输出信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值