vue 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。(vue官方网址:https://cn.vuejs.org/v2/guide/)

以下就是我个人的理解,如果有什么不对的或者不懂得欢迎评论

vue生命周期一共有十一个,常用的有八种分为四个周期,每个周期有两种函数,分别是beforeCreate,created,boforeMount,mounted,beforeUpdate,updated,beforeDestory,destoryed

还有三个特殊阶段 activated,组合缓存组件keep-alive使用,beactivated也需要结合keep-alive来使用,还有最后一个就是2.5.0以上版本增加的beforeDestory,当获取来自子孙组件发生错误时被调用。最后这三个以后再讲,今天主要是 前八个。

第一阶段,创建阶段,与实例挂载数据相关,beforeCreate为没有准备好,在这个阶段页面还未创建对象,页面为空白的,这个阶段通常用来做loading图的展示,函数自动触发,只执行一次。

created此处创建出dom对象,但是还未加载数据,页面会展示dom结构,函数自动触发,只执行一次。

第二阶段,挂载阶段,与实例挂在相关beforeMount 实例创建出,但是未加载到页面,但是需要挂载时会被挂载在页面上,不会被解析

mounted阶段,实例挂载在页面,而且被解析,此处应写数据请求,并且关闭loading图,因为页面已经加载完毕,自动触发,只执行一次

第三阶段,更新阶段,更新dom视图渲染,beforeUpdate是渲染之前,数据会改变,update是渲染之后,数据改变,视图渲染完成这个阶段两个函数都需要调用才会触发,可以多次执行

第四阶段,销毁阶段,beforeDestory,destoryed,这两个函数不常用,作用是实例跟行为解绑,所有操作都无法使用,有释放内存的作用,这个阶段也需要调用才会执行,可以多次执行。

生命周期的钩子函数自动绑定this上下文实例中,因此可以使用this访问数据,对属性和方法进行运算。但是不能使用箭头函数来定义一个生命周期方法、箭头函数改变this指向

原文地址:https://www.cnblogs.com/jickma/p/11278321.html