Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。
、beforeCreate
  在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
、created
  实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
、beforeMount
  在挂载开始之前被调用:相关的render函数首次被调用。
  该钩子在服务器端渲染期间不被调用。
、mounted
  el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。
  该钩子在服务端渲染期间不被调用。
、beforeUpdate
  数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。
  你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。
  该钩子在服务端渲染期间不被调用。
、updated
  由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
  当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
  该钩子在服务端渲染期间不被调用。
、activated
  keep-alive组件激活时调用。
  该钩子在服务器端渲染期间不被调用。
、deactivated
  keep-alive组件停用时调用。
  该钩子在服务端渲染期间不被调用。
、beforeDestroy 【类似于React生命周期的componentWillUnmount】
  路由跳转加载的时候会调用。(有时用到eventBus事件总线事件不触发的时候,放到此生命周期里问题就解决了。)
  实例销毁之间调用。在这一步,实例仍然完全可用。
  该钩子在服务端渲染期间不被调用。
  需要注意的是当组件使用了<keep-alive>进行缓存组件数据时,beforeDestroy生命周期也不会执行。
、destroyed
  Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
  该钩子在服务端渲染不会被调用。

vue组件生命周期详解的更多相关文章

  1. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  2. VUE二 生命周期详解

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

  3. vue实例生命周期详解

    每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实 ...

  4. Vue组件通信方式全面详解

    vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...

  5. ASP.NET生命周期详解

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  6. ASP.NET生命周期详解 [转]

    最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等 ...

  7. ASP.NET生命周期详解(转)

    看到好文章需要分享. 最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多 ...

  8. ASP.NT运行原理和页面生命周期详解及其应用

    ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用.  ...

  9. Vue 组件生命周期钩子

    Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...

随机推荐

  1. Linux学习之用户与root

    因为想要建立建立一个目录,但是发现权限不够,因为没用root登陆,所以学习了一下普通用户与root之间如何切换以及如何创建用户的一些知识. 1.pwd命令可以查看当前用户 $这个符号代表的就是普通用户 ...

  2. 51nod 1215 数组的宽度(单调栈)

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1215 题意: 思路: 计算出以第i个数为最大值的区间范围,l_max[i ...

  3. 浅谈 equals 和 == 的区别

    在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String(&qu ...

  4. live2d+cocos2dx示例工程

    环境 : win10 64bit visual studio 2013 cocos2d-x-3.9 Live2D_SDK_OpenGL_2.0.06_2_sample_3.3_en 首先安装visua ...

  5. VC静态调用DLL(lib)

    1. #pragma comment(lib, "libxml2.lib")#pragma comment(lib, "iconv.lib")#pragma c ...

  6. 在Windows下解决git ERROR: Permission to XXX.git denied to user

    这种情况一般都是由于登陆了不同的git仓库在本地记录了凭证导致的,比如登陆了两个不同的github账号. 1.控制面板 2.删除凭证再重新提交将会重新输入用户名和密码 以上.

  7. js正则表达式的积累

    验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证 ...

  8. Java使用Spring初识

    1.首先是引用了,然后pom.xml如下: <dependency> <groupId>org.springframework</groupId> <arti ...

  9. echarts画中国地图并上色

    任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool ...

  10. [Maven] guide: maven in 5 minutes

    ran during my bad network connection, it' s more that just 5 minutes. 1. execute "mvn archetype ...