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

1、beforeCreate

  在实例初始化之后,数据观测和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实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

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

 

 

 

 

 

摘抄详细的VUE生命周期的更多相关文章

  1. Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)

    文章目录 1.Vue生命周期 1.1 概念 1.2 图解 2.钩子函数的用法说明 2.1 beforeCreate()和created()的详细讲述 2.1.1 方法说明 2.1.2 代码实例 2.1 ...

  2. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  3. vue 生命周期的详解

    一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...

  4. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  5. VUE生命周期中的钩子函数及父子组件的执行顺序

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  6. Vue生命周期,我奶奶看了都懂了

    最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...

  7. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  9. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

随机推荐

  1. Java项目源码为什么要做代码混淆(解释的很好)

    代码混淆,是将计算机程序的代码转换成一种功能上等价,但是难于阅读和理解的形式的行为.代码混淆可以用于程序源代码,也可以用于程序编译而成的中间代码.执行代码混淆的程序被称作代码混淆器.目前已经存在许多种 ...

  2. 【翻译】将Ext JS Grid转换为Excel表格

    原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - ...

  3. 海量数据挖掘MMDS week2: Association Rules关联规则与频繁项集挖掘

    http://blog.csdn.net/pipisorry/article/details/48894977 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...

  4. 9、Libgdx的输入处理

    (官网:www.libgdx.cn) 不同的平台有着不同的输入方式.桌面用户可以通过键盘和鼠标与应用进行交互,基于浏览器的游戏也是这样.在Android中,鼠标被触摸屏所替代,通常没有实体键盘.And ...

  5. github管理的建立(SSH Key生成步骤)

    Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...

  6. 《java入门第一季》之Random类和获取随机数案例

    /*  * Random:产生随机数的类  *   * 构造方法:  * public Random():没有给种子,用的是默认种子,是当前时间的毫秒值下的随机数,所以会一直变化  * public ...

  7. 开源图像检索工具:Caliph&Emir使用方法

    Caliph&Emir是基于MPEG7的软件.它是用Java编写的开源软件.采用了lucene完成索引和检索功能.是研究MPEG7标准,图像检索等等方面不可多得的好工具. 在此介绍一下它们的基 ...

  8. RecyclerView实现瀑布流效果(二)

    在上篇中我们知道RecyclerView中默认给我们提供了三种布局管理器,分别是LinearLayoutManager.GridLayoutManager.StaggeredGridLayoutMan ...

  9. Errors running builder 'Integrated External Tool Builder' on project xxx

    出现这样的提示,表明你的项目的Builder项出了问题. 解决方法是: 右键项目选择"Properties",再选择"Builders",删除丢失的builde ...

  10. Leetcode_53_Maximum Subarray

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/43989997 Find the contiguous su ...