vue组件的生命周期

更新日期: 2019-12-30阅读: 1.8k标签: 生命周期
vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。

详细解释可参考这里


1、beforeCreate

在实例初始化(new Vue())之后,数据观测和event/watcher事件 配置之前被调用。


2、created

实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,el属性目前不可见。


3、beforeMount

在挂载开始之前被调用:相关的render函数首次被调用。

该钩子在服务器端渲染期间不被调用。


4、mounted

el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。

该钩子在服务端渲染期间不被调用。


5、beforeUpdate

数据更新时调用,发生在虚拟dom重新渲染和打补丁之前。

可以在这个钩子中进一步更改状态,这不会触发附加的重渲染过程。

该钩子在服务端渲染期间不被调用。


6、updated

由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务端渲染期间不被调用。


7、activated

keep-alive组件激活时调用。

该钩子在服务器端渲染期间不被调用。


8、deactivated

keep-alive组件停用时调用。

该钩子在服务端渲染期间不被调用。


9、beforeDestroy 【类似于react生命周期的componentWillUnmount】

实例销毁之间调用。在这一步,实例仍然完全可用。

该钩子在服务端渲染期间不被调用。


10、destroyed

Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

该钩子在服务端渲染不会被调用。


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

vue生命周期诠释

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

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 将这些生命周期暴露出来给开发者调用是因为开发者有使用这些生命周期的需求,通过这些生命周期,我们可以完成一些事情。主要可分为 初始化阶段、挂载阶段、更新阶段、卸载阶段

图解React组件生命周期

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

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