GIS数据共享:官方网站

vue

当前位置:首页 > language > H5 > vue

Vue的生命周期详解

Vue的生命周期详解

一、定义

Vue的生命周期就是实例从创建到销毁的一个过程,即从创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染,卸载等一系列的过程。

写代码时注意:

Vue的生命周期钩子函数会自动绑定this上下文到实例中,这意味着不能使用箭头函数来定义一个生命周期方法(例如不能这样写:created:()=>this.fetchData()),因为箭头函数的this指向的是定义它的函数,谁定义它,它就在谁的作用域里生效。

二、Vue的生命周期分为八个阶段

分别是beforeCreate(创建前)、created(创建后)、beforeMount(挂载前)、mounted(挂载后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)。

(1)beforeCreate

在实例初始化(new Vue())后执行,此时的数据监听和事件绑定机制都未完成,获取不到DOM节点。(可以在此阶段加loading事件,在加载实例时触发)

(2)created

这个阶段vue实例已经创建,以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始,仍然获取不到DOM元素。(在此阶段,初始化完成时的事件写在这里,如在这结束loading事件,也可以进行异步请求)

(3)beforeMount

在这个阶段完成了DOM的初始化,但仍然无法获取到具体的DOM元素,因为vue还没有进行根节点挂载,但是根节点已经创建完成,下面Vue对DOM的操作将围绕这个根节点进行。(beforeMount这个阶段是过渡性的,在项目中使用得比较少)

(4)mounted

在这个阶段,实例已经被挂载完成了,也就是能获取到数据和DOM元素了。

(注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick.)

(5)beforeUpdate

在数据发生改变,但页面还没有完成更新时执行的操作,在此阶段视图的数据和DOM元素的数据没有保持同步。(这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器)

(6)updated

这个时候数据发生了改变,并且视图页面也已经完成了更新,因此,该阶段看到的DOM元素的内容是最新内容。

(注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick)

(7)beforeDestroy

此阶段Vue实例仍然完全可用,也就是还能访问到页面的响应式数据和事件。(可以在这里注销eventBus等事件)

(8)destroyed

DOM元素被销毁,此时对应 的Vue 实例所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

Vue的生命周期详解

扫码查看

上一篇:vue父组件和component相互调运

下一篇:已经是最后一篇

相关内容

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

热门标签