浅谈vue生命周期的理解

最新推荐文章于 2022-10-01 10:55:31 发布
最新推荐文章于 2022-10-01 10:55:31 发布
阅读量131 收藏 1
点赞数
分类专栏： javascript vue web前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19945487/article/details/113879872
版权
web前端 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
javascript
19 篇文章 0 订阅
订阅专栏
vue
12 篇文章 0 订阅
订阅专栏

什么时生命周期

一个事物从诞生到消亡，vue的生命周期就是 vue从创建到销毁之间的各种事件

也可以说是生命周期钩子

创建时候的生命周期函数=》运行期间的生命周期函数=》销毁期间的生命周期函数

首先vue在new之后会先初始化事件和生命周期函数，然后遇到第一个生命周期函数beforeCreate，意味着示例创建完毕，但是这个时候data和methods都没有被初始化

遇到的第二个生命周期函数是created，这时候data和methods都被初始化了，如果要调用方法或数据，最早只能在这里

接下来vue开始进行模板的编译，在内存中生成编译好的模板，但还没有挂载到页面，这是第三个生命周期函数beforeMount

最后将内存中的模板渲染到了页面中，这时候是mounted生命周期，组件被完全创建，进入运行阶段

当数据发生改变时，先遇到beforUpdata生命周期函数，这时候页面中的数据还没更新；然后dom重新渲染到页面，下面的updataed生命周期中内容就已经重新渲染完毕了

执行beforeDestroy钩子函数时，vue示例已经进入销毁阶段，但还没真正销毁

执行到destroyed函数就被真正销毁了

YoungDoCui
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈vue生命周期共有几个阶段？分别是什么？
10-14
主要介绍了浅谈vue生命周期共有几个阶段？分别是什么？具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue的生命周期详解（简单易懂）
weixin_42343966的博客
12-09 5730
Vue的生命周期就是实例从创建到销毁的一个过程，即从创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染，卸载等一系列的过程。
Vue的生命周期的详解
热门推荐
weixin_45791692的博客
04-11 14万+
Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识，以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数，分别为： beforeCreate( 创建前
update（十）
weixin_30542079的博客
08-14 379
Vue 的_update是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；由于我们这一章节只分析首次渲染部分，数据更新部分会在之后分析响应式原理的时候涉及。_update方法的作用是把 VNode 渲染成真实的 DOM，它的定义在src/core/instance/lifecycle.js中： Vue.prototype._update ...
Vue组件的生命周期
lzzw的学习之路
08-31 425
首先，如图所示：组件在各个阶段的状态（https://cn.vuejs.org/v2/guide/instance.html） 组件的创建阶段 1.new vue() : new一个vue的实例对象；此时会进入组件的创建过程（该组件在代码中被注册并使用时，就代表着其被new了一个新的实例对象）。 2.Init Events & Lifecycle ： 初始化组件的事件和生命周期函数；当执行完这一步之后，组件的生命周期函数就已经全部初始化好了，等待着依次去调用。 3.beforeCr
Vue生命周期(个人理解)
m0_67402341的博客
03-06 520
描述：今天进度到生命周期 other-teacher只讲了两个项目使用到的生命周期 剩下的自己扩展，哎，自己来了兴趣，为啥，自己第一次面试的时候记得很清楚。面试官：“简单说一下你对vue生命周期的个人理解” 我:语塞(第一次)，第二次说完周期名字之后就不知道怎么说个人理解了，所以这次很想搞搞清楚 一、官网 英文官网：Vue.js 中文官网：Vue.js 二、理论 安装环境 https://blog.csdn.net/nanyangnongye/article/details/122796987 本次练习.
浅谈Vuex注入Vue生命周期的过程
10-16
主要介绍了Vuex 注入 Vue 生命周期的过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
对vue生命周期的深入理解
01-18
一.Vue生命周期简介 官网：https://cn.vuejs.org/v2/api/#beforeCreate Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程...
vue生命周期实例小结
10-18
主要介绍了vue生命周期,结合实例形式分析了vue.js生命周期相关原理、步骤、函数与操作注意事项,需要的朋友可以参考下
浅析Vue 生命周期
08-27
主要介绍了Vue 生命周期的过程，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2生命周期理解
String111111Name的博客
10-01 817
vue生命周期
vue 中updated的使用
tangcc的博客
02-01 10万+
updated : function(){//什么时候 进updated方法？//只有事先设置好的data变量改变并且要在页面重新渲染{{}}完成之后,才会进到这个方法，光改变data但不渲染页面//是不会进来的 console.log("1==我会先执行"); this.$nextTick(function(){  //在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法...
面试官：说说你对双向绑定的理解?
weixin_44475093的博客
11-27 1631
一、什么是双向绑定我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在...
谈谈对vue的生命周期理解
aiwo035的博客
05-10 544
我们创建实例都是挂载在app这个dom上，在初始化实例new vue()的过程中首先执行了init（init是vue组件里面默认去执行的初始化events)，然后首先调用beforeCreate，然后在injections（注射）和reactivity（反应性）的时候，它会再去调用created，data初始化是在created里面，当created完成之后，它会去判断instance（实例）里面...
Vue面试题整理
OuNuo5280的博客
05-26 1965
一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewMo
vue生命周期
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
Vue js 的生命周期（看了就懂）
越努力越幸运
03-03 12万+
用Vue框架，熟悉它的生命周期可以让开发更好的进行。 首先先看看官网的图，详细的给出了vue的生命周期: 它可以总共分为8个阶段： beforeCreate（创建前）, created（创建后）, beforeMount(载入前), mounted（载入后）, beforeUpdate（更新前）, updated（更新后）, beforeDestroy（销毁前）, de
Vue生命周期
weixin_45844109的博客
07-07 634
Vue生命周期也可以叫生命周期钩子，生命周期函数一共分为三类： 创建期间生命函数，运行期间生命函数，销毁期间生命函数
VUE基础（1）：VUE的生命周期
imagine_tion的博客
12-01 302
一、
vue 生命周期的理解
最新发布
10-25
Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更好地进行开发和调试。Vue生命周期分为8个阶段，分别是：创建前、创建中、创建后、挂载前、挂载后、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值