Vue生命周期详解

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }

根组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }

组件实例：8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }

全局路由钩子：2个 (beforeEach、afterEach)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }

组件路由钩子：3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }

指令的周期： 5个 (bind、inserted、update、componentUpdated、unbind)

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }

beforeRouteEnter的next所对应的周期

nextTick所对应的周期

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }
span.s2 { font: 12.0px "Helvetica Neue" }

组件实例周期

beforeCreate

实例初始化之后，数据（data observer）和事件（event/watcher）配置之前被调用

此时组件的选项还未挂载，因此无法访问methods，data,computed上的方法或数据

created

实例已经创建完成之后被调用。已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。挂载阶段还没开始，$el 属性目前不可见。

这是一个常用的生命周期，因为你可以调用methods中的方法、改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上、获取computed中的计算属性等等。

tip:

通常我们可以在这里对实例进行预处理。

也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的。

因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个页面发请求。

建议在组件路由勾子beforeRouteEnter中来完成。

beforeMonut

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

mounted

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

tip：

1.在这个周期内，对data的改变可以生效。但是要进下一轮的dom更新，dom上的数据才会更新。

2.这个周期可以获取 dom。 之前的论断有误。

3.beforeRouteEnter的next的勾子比mounted触发还要靠后

4.指令的生效在mounted周期之前

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

beforeDestroy

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

1.这一步还可以用this来获取实例。

2.一般在这一步做一些重置的操作。比如清除掉组件中的 定时器 和 监听的dom事件

destroyed

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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

全局路由钩子

作用于所有路由切换，一般在main.js里面定义

router.beforeEach

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }

示例

router.beforeEach((to, from, next) => {
  console.log(‘路由全局勾子：beforeEach -- 有next方法‘)
  next()
})

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }

一般在这个勾子的回调中，对路由进行拦截。

比如，未登录的用户，直接进入了需要登录才可见的页面，那么可以用next(false)来拦截，使其跳回原页面。

值得注意的是，如果没有调用next方法，那么页面将卡在那。

next的四种用法

1.next() 跳入下一个页面

2.next(‘/path‘) 改变路由的跳转方向，使其跳到另一个路由

3.next(false)  返回原来的页面

4.next((vm)=>{})  仅在beforeRouteEnter中可用，vm是组件实例。

router.afterEach

示例

router.afterEach((to, from) => {
  console.log(‘路由全局勾子：afterEach --- 没有next方法‘)
})

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px ".PingFang SC"; color: #454545 }
p.p4 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

在所有路由跳转结束的时候调用，和beforeEach是类似的，但是它没有next方法

组件路由勾子

和全局勾子不同的是，它仅仅作用于某个组件，一般在.vue文件中去定义。

beforeRouteEnter

示例

 beforeRouteEnter (to, from, next) {
    console.log(this)  //undefined，不能用this来获取vue实例
    console.log(‘组件路由勾子：beforeRouteEnter‘)
    next(vm => {
      console.log(vm)  //vm为vue的实例
      console.log(‘组件路由勾子beforeRouteEnter的next‘)
    })
  }

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p4 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }

这个是一个很不同的勾子。因为beforeRouterEnter在组件创建之前调用，所以它无法直接用this来访问组件实例。

为了弥补这一点，vue-router开发人员，给他的next方法加了特技，可以传一个回调，回调的第一个参数即是组件实例。

一般我们可以利用这点，对实例上的数据进行修改，调用实例上的方法。

我们可以在这个方法去请求数据，在数据获取到之后，再调用next就能保证你进页面的时候，数据已经获取到了。没错，这里next有阻塞的效果。你没调用的话，就会一直卡在那

tip:

next(vm=>{console.log(‘next‘)  })

这个里面的代码是很晚执行的，在组件mounted周期之后。没错，这是一个坑。你要注意。

beforeRouteEnter的代码时很早执行的，在组件beforeCreate之前；

但是next里面回调的执行，很晚，在mounted之后，可以说是目前我找到的，离dom渲染最近的一个周期。

beforeRouteLeave

beforeRouteLeave (to, from, next) {
    console.log(this)    //可以访问vue实例
    console.log(‘组件路由勾子：beforeRouteLeave‘)
    next()
  }

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }

在离开路由时调用。可以用this来访问组件实例。但是next中不能传回调。

beforeRouteUpdate

这个方法是vue-router2.2版本加上的。因为原来的版本中，如果一个在两个子路由之间跳转，是不触发beforeRouteLeave的。这会导致某些重置操作，没地方触发。在之前，我们都是用watch $route来hack的。但是通过这个勾子，我们有了更好的方式。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px ".PingFang SC"; color: #454545 }

指令周期

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
span.s1 { font: 12.0px "Helvetica Neue" }

bind

只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted

被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

实际上是插入vnode的时候调用。

update

被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

慎用，如果在指令里绑定事件，并且用这个周期的，记得把事件注销

componentUpdated

被绑定元素所在模板完成一次更新周期时调用。

unbind

只调用一次， 指令与元素解绑时调用。

li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px ".PingFang SC" }
ol.ol1 { list-style-type: decimal }

时间： 2024-08-29 16:17:51

Vue生命周期详解的相关文章

Vue生命周期详解（1）- 单个组件

刚接触vue,使用vue并没意识到生命周期的重要性.直到项目深入,在解决父组件异步加载数据传给子组件并渲染时首次渲染异常的问题时,浪费了很多时间,才发现自己对vue生命周期理解的欠缺.因此,这次专门重新学习一下vue的生命周期并总结在这里分享,希望对大家有所帮助. 首先上官方大图(是不是很高大上?然而,有点晦涩,对初学者不是很友好!) 不过不用担心,咱们程序员不就是实践出真知嘛!上代码: 1 <!DOCTYPE html> 2 <html lang="en">

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

最近一直在学习ASP.NET MVC的生命周期,发现ASP.NET MVC是建立在ASP.NET Framework基础之上的,所以原来对于ASP.NET WebForm中的很多处理流程,如管道事件等,对于ASP.NET MVC同样适用.只是MVC URLRouting Module对进入到server的request进行了拦截,然后对此次request的handler进行了特殊的处理.总结来说,就是 ASP.NET管道是所有ASP.NET Web Applicaiton,包括WebForm,

struts2.0中Action的对象生命周期详解！！（转）

原文出处:http://blog.csdn.net/wxy_g/article/details/2071662 有很多人问Struts2.0中的对象既然都是线程安全的,都不是单例模式,那么它究竟何时创建,何时销毁呢? 这个和struts2.0中的配置有关,我们来看struts.properties ### if specified, the default object factory can be overridden here ### Note: short-hand notation is

IOS应用的执行过程以及生命周期详解

iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变换,这些对于开发者来说都是很重要的. iOS系统的资源是有限的,应用程序在前台和在后台的状态是不一样的.在后台时,程序会受到系统的很多限制,这样可以提高电池的使用和用户体验. //开发app,我们要遵循apple公司的一些指导原则,原则如下: 1.应用程序的状态 状态如下: Not running  未运行  程序没启动 Inactive          未激活        程序在前台运行,不过没有接收到事件.在没

android四大基础组件--Service生命周期详解

android四大基础组件--ServiceService 生命周期详解 1.Service的生命周期: I> 在非绑定Service情况下,只有oncreate(),onStartCommand(),onDestory()方法情况下:  操作方法对应生命周期一: a.[执行startService(Intent)] 执行生命周期方法:oncreate()--->onStartCommand(): b.[执行stopService(Intent)] 执行生命周期方法:onDestory();

React—组件生命周期详解

React-组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢迎加入QQ群(115402375)讨论!博客编写已经转移到http://blog.csdn.net/limm33 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出. React为每个组件

Fragment生命周期详解

Fragment生命周期详解 1. Fragment概述 Fragment从Android v3.0版本开始引入 随着界面布局的复杂化,处理起来也更加的复杂,引入Fragment可以把activity拆分成各个部分.每个Fragment都有它自己的布局和生命周期.方便了开发. 采用fragment而不是activity进行应用的UI管理,可绕开Android系统activity规则的限制. fragment是一种控制器对象,activity可委派它完成一些任务通常这些任务就是管理用户界面.受管的

Spring Bean的生命周期详解

Spring Bean的生命周期详解 Spring IoC容器的本质目的就是为了管理Bean,对于Bean而言,在容器中存在其生命周期,它的初始化和销毁也需要一个过程,下面主要对其生命周期进行一个详解的解释.生命周期主要是为了了解Spring IoC容器初始化和销毁Bean的过程,通过下图即可以掌握Spring IoC容器初始化与销毁Bean的过程. 通过上图,我们首先可以看到生命周期的步骤. 1)如果Bean实现了接口 BeanNameAware 的 setBeanName 方法,那么它就会调

vue组件生命周期详解

Vue实例有一个完整的生命周期,也就是说从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会.Vue是一个自带组件系统的前端框架.Vue的每一个实例其实就是一个组件,我们在组织我们的页面结构的时候其实就是在定一个一个组件,然后拼装在一起,完成一个复杂的页面逻辑.组件主要包含:数据,模版,以及链接数据和模版的状态响应系统. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件