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. Ubuntu15.10下如何使用EasyGui模块开发Python GUI

    偶然的一个机会,发现了github上的这个开源的项目,easygui for python(一个基于TKinter的模块) 感觉很是惊讶,原来python也可以这么简单的开发出一些GUI界面(究其原因 ...

  2. Android初级教程理论知识(第六章广播接受者)

    总体概述: 广播接收者 现实中:电台要发布消息,通过广播把消息广播出去,使用收音机,就可以收听广播,得知这条消息 Android中:系统在运行过程中,会产生很多事件,那么某些事件产生时,比如:电量改变 ...

  3. 为什么选择PostgreSQL而不是MySQL

    David Bolton是一名独立开发者,他使用PostgreSQL和MySQL都已有超过十年的时间.近日,他撰文阐述了选择PostgreSQL而不是MySQL的理由.他认为,MySQL之所以仍然如此 ...

  4. UNIX环境高级编程——信号(API)

    一.信号在内核中的表示     实际执行信号的处理动作称为信号递达(Delivery),信号从产生到递达之间的状态,称为信号未决(Pending).进程可以选择阻塞(Block)某个信号.被阻塞的信号 ...

  5. oozie note

    http://blog.sina.com.cn/s/blog_62a9902f01011ccd.html 实例:http://www.infoq.com/cn/articles/oozieexampl ...

  6. 【Unity Shaders】Diffuse Shading——向Surface Shader添加properties

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  7. 学习pthreads,使用属性对象创建结合线程和分离线程

    当我们创建了子线程,是让它犹如脱缰之马,信步驰骋,还是如乖巧听话的孩子,时不时教导一下呢?针对这个问题,本文介绍线程的结合和分离,结构分为三个部分,第一部分给出代码示例,第二部分对代码进行讲解,第三部 ...

  8. 解决Fragment中使用地图,切换会闪一下黑屏的问题

    我用的是高德的3D地图,用2D地图无此问题. 从答案来看,大概是SurfactView与Fragment之间的问题.虽然我用的是高德,不过这方法估计对百度地图也有效. 解决方法是,在使用到地图的Act ...

  9. Shell script 传参数处理(默认变量)

    变量 含义 $0:shell脚本的名字: $1 位置参数 #1 $2 - $9 位置参数 #2 - #9 ${10} 位置参数 #10 "$*" :代表"$1c$2c$3 ...

  10. 算法面试题-leetcode学习之旅(二)

    题目: Given a non-negative integer num, repeatedly add all its digits until the result has only one di ...