vue生命周期诠释

更新日期: 2019-07-06阅读: 2k标签: 生命周期
vue的生命周期的含义实质上就是一个实例从创建到销毁的一系列可以进行的操作  

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。



beforecreate : 

  1. 完成实例初始化,初始化非响应式变量
    this指向创建的实例;
    可以在这加个loading事件;
    data computed watch methods上的方法和数据均不能访问

created

  1. 实例创建完成
    完成数据(data props computed)的初始化 导入依赖项。
    可访问data computed watch methods上的方法和数据
    未挂载DOM,不能访问$el,$ref为空数组
    可在这结束loading,还做一些初始化,实现函数自执行,
    可以对data数据进行操作,可进行一些请求,请求不易过多,避免白屏时间太长。
    若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中

berofeMount

  1. 有了el,编译了template|/outerhtml
  2. 能找到对应的template,并编译成render函数

mounted

  1. 完成创建vm.$el,和双向绑定,
    完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
    即有了DOM 且完成了双向绑定 可访问DOM节点,$ref
    可在这发起后端请求,拿回数据,配合路由钩子做一些事情;
    可对DOM 进行操作

beforeUpdate

  1. 数据更新之前
    可在更新前访问现有的DOM,如手动移除添加的事件监听器;

updated :

  1. 完成虚拟DOM的重新渲染和打补丁;
    组件DOM 已完成更新;
    可执行依赖的dom 操作
    注意:不要在此函数中操作数据,会陷入死循环的。

activated:

  1. 在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,
    如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发

deactivated 

  1. for keep-alive 组件被移除时使用

beforeDestroy: 

  1. 在执行app.$destroy()之前
    可做一些删除提示,如:你确认删除XX吗? 
    可用于销毁定时器,解绑全局时间 销毁插件对象

destroyed :

  1. 当前组件已被删除,销毁监听事件 组件 事件 子实例也被销毁 这时组件已经没有了,你无法操作里面的任何东西了。


子父组件的生命周期

  • 仅当子组件完成挂载后,父组件才会挂载
  • 当子组件完成挂载后,父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次)
  • 父子组件在data变化中是分别监控的,但是在更新props中的数据是关联的(可实践)
  • 销毁父组件时,先将子组件销毁后才会销毁父组件
  • 兄弟组件的初始化(mounted之前)分开进行,挂载是从上到下依次进行
  • 当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的
  • mixin中的生命周期与引入该组件的生命周期是仅仅关联的,且mixin的生命周期优先执行


链接: https://fly63.com/article/detial/4035

Flutter中State生命周期

State 的生命周期,指的是在用户参与的情况下,其关联的 Widget 所经历的,从创建到显示,再到更新最后到停止,直至销毁等各个阶段,不同的阶段涉及到特定的任务处理。

理解react生命周期

挂载(Mounting)挂载指的是组件被实例化并插入到dom中,顺序如下:constructor -> getDerivedStateFromProps -> render -> componentDidMount,更新(Updating)当state变化或者props变化会引起更新

微信小程序APP生命周期

小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数,onLaunch----当小程序初始化完成时,会触发 onLaunch

vue的生命周期和钩子函数

其实在提到vue的生命周期和钩子函数的时候,有的人认为常用的钩子函数有10个,也有的人认为是8个,无论是10个还是8个对于我而言都是一样的,我们主要讲解8个vue的钩子函数。首先来一波官网的对于vue生命周期的图解

React 生命周期详解

请不要死记生命周期的顺序和作用,要理解 React 将这些生命周期暴露出来给开发者调用是因为开发者有使用这些生命周期的需求,通过这些生命周期,我们可以完成一些事情。主要可分为 初始化阶段、挂载阶段、更新阶段、卸载阶段

vue组件的生命周期

Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文

图解React组件生命周期

每个React类组件都包含“生命周期方法”(function组件是没有生命周期方法的),你可以重写这些方法,以便于在运行过程中特定的阶段执行这些方法。在接下来的文章中,生命周期方法的书写会遵照如下规则,以方便大家理解。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!