vue2生命周期详解

最新推荐文章于 2024-03-26 20:31:43 发布
最新推荐文章于 2024-03-26 20:31:43 发布
阅读量1.8k 收藏 2
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61417250/article/details/121950910
版权

vue生命周期分别有创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载利用钩子函数完成对应的项目效果

beforeCreate( 创建前 )

在实例化之后，数据的观测和事件的配置之前的时候调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据

created ( 创建后）

在创建之后使用，主要用于数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。 然而，挂在阶段还没有开始.

beforeMount (挂载前)

用于在挂载之前使用,在这个阶段是获取不到dom操作的,把data里面的数据和模板生成html，完成了data等初始化,注意此时还没有挂在html到页面上

mount (挂载后)

用于挂载之后使用，在这个时候可以获取到dom操作，比如可以获取到ref等，操作的dom， 在这个时候只能调用一次ajax，在这个时候el和data都可以获取的到

beforeUpdate (更新前)

在数据更新之前被调用，发生在虚拟DOM重新渲染，可以在该钩子中进一步地更改状态，不会触发重复渲染过程

updated (更新后)

在由于数据更改导致地虚拟DOM重新渲染会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，但是在服务器端渲染期间不被调用，可以用于监听某些数据的时候使用钩子

beforeDestroy（销毁前）

在这个时候还是可以用this来获取，可以用于销毁计时器时候使用，为了防止跳转到其它页面该事件还在执行，还可以清除dom事件等

destroy（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁

看见还不错
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue组件生命周期详解
08-28
主要为大家详细介绍了vue组件生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于Vue生命周期详解
10-29
关于Vue生命周期详解。 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
Vue2的生命周期(详解)
Gik99的博客
03-04 6424
Vue的生命周期(初始化、挂载、更新、销毁)
vue2-常见的八个生命周期函数
最新发布
weixin_62160709的博客
03-26 1113
从vue实例创建、运行、到销毁期间，总是伴各种各样的事件，这些事件统称为声明周期beforeCreate：初始化之前，作用：页面重定向create：初始之后，作用：初始化data中的数据，发送请求beforeMount：挂载虚拟的DOM，页面中的内容还是vue中的占位符mounted：挂载真实DOM，第一个可以操控DOM的生命周期函数beforeUpdate：更新前，页面中数据与data的中的数据不一致updated：更新后，页面中的数据与data中的数据一致。
Vue2、Vue3的生命周期
darabiuz的博客
02-14 873
Vue2的生命周期 1.生命周期的定义 1.又名:生命周期回调函数、生命周期函数、生命周期钩子 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm或组件实例对象。 2.为什么要有生命周期 假如现在想实现这样一个效果:页面一进入，标题"欢迎学习vue"文字的透明度就从1逐渐减小到0，然后再恢复至1，周而往复 结构代码： <h2 :style="{ opacity
vue2的生命周期详解（代码演示+源码）
如果相遇，那么你好哦~
08-25 6127
生命周期是vue2中一个很重要的知识点，同时也是面试中容易问到的高频面试点。熟练掌握了vue2的生命周期，可以让我们在项目开发过程中少走很多弯路，减少很多莫名其妙的bug，所以，希望本文能够对各位小伙伴有所帮助哦！
Vue 组件的生命周期
aoshisen的博客
06-24 2019
1、组件生命周期 组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法。 基本生命周期函数有下面几个阶段： 创建阶段 挂载阶段 更新阶段 卸载阶段 其它 每一个阶段都对应着 之前 和 之后 两个函数。 2、创建阶段 2-1、beforeCreate() 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。初始化阶段，应用不多。 2-2、created() 在实例创建完成后被立即调用。在这一步
vue2的生命周期
热门推荐
Dear_pandy的博客
08-09 1万+
例如。
vue核心面试题（vue组件的生命周期）
王三六博客
07-08 1165
概念： 一、生命周期钩子在什么时候调用 1.beforeCreate 在实例初始化之后，数据观测(data observer) 之前被调用。 2.created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。这里没有$el ，创建完成后还没渲染到页面上。 3.beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。渲染之前对template中的页面进行求值。 4..
Vue生命周期函数执行顺序（使用注意事项）
weixin_43749805的博客
05-11 2604
Vue.js 是一个基于 MVVM 模式的前端框架，它的核心是一个响应式的数据绑定系统。在 Vue.js 中，组件是一个可复用的 Vue 实例，它拥有自己的生命周期钩子函数，用于在组件生命周期的不同阶段执行一些特定的逻辑。
vue2 生命周期详解
专注于web前端开发
05-04 4895
回到开头那个问题，new Vue()之后，发生了什么？，当数据发生变化之后又发生了什么？销毁呢？
vue实例的生命周期详解
04-24
vue生命周期
Vue生命周期示例详解
08-30
主要为大家详细介绍了Vue生命周期的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue生命周期
枫小秋 的博客
05-27 568
Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 生命周期图.jpg 生命周期文字解析.jpg beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 created ( 创
Vue学习之Vue的生命周期详细解释
five-five
03-21 1533
mounted（挂载后） 在组件被挂载到页面之后调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。beforeMount（挂载前） 在组件被挂载到页面之前调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。beforeUpdate（更新前） 在组件更新之前调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。updated（更新后） 在组件更新之后调用，此时程序员可以访问到组件的数据和方法，也可以访问到 DOM 元素。
简单总结分析vue生命周期
weixin_45294459的博客
10-08 521
的作用是初始化props、data、methods、watch、computed等属性，beforeCreated的钩子函数中就不能获取到props、data、methods、中定义的值和定义的函数，而created可以。每一个vue实例从创建待销毁的过程，就是这个vue实例的生命周期，在这一过程中，他经历了从开始创建、初始化数据、编译模板、挂载DOM、渲染->更新->渲染、卸载等一系列过程。此阶段依旧得不到具体的DOM，但vue挂载的根节点已经创建，之后vue对DOM的操作将围绕根元素继续进行；
vue2之生命周期
发果叁
01-17 1169
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
Vue2 生命周期
qq_52731478的博客
06-02 127
一个vue实例创建到模板卸载的过程4个阶段8个生命周期函数。
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> ``` 你可以在浏览器中打开该示例，然后在控制台中查看不同生命周期阶段的输出信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值