Vue生命周期解析

Vue生命周期讲解

以下是我的个人理解,仅供参考

每个Vue实例在被创建时都会经过一系列的初始化过程–例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等,同时在这个过程中也会运行一些叫做生命周期钩子函数,使用户在不同阶段添加自己的代码,实现一些交互效果

通俗说就是一个vue实例从创建到销毁的过程,就是生命周期。从开始创建,初始化数据,编译模板,挂载DOM=>渲染,更新=>渲染,销毁等一系列过程,称之为vued的生命周期

vue的生命周期中有多个事件钩子,让我们更好的控制Vue实例过程,更容易形成好的逻辑

vue共十一个阶段,主要分为四大阶段创建前后两阶段,挂载前后,更新前后,销毁前后,其中有三个特殊的阶段,keep-vlive包裹缓存前后两阶段,捕获子孙组件错误时调用阶段

beforeCreate (创建之前)
此时的数据和一些事件还未开始
created (创建之后)
此时完成数据,属性和方法的运算,和一些初始化的事件,$el属性还未加载完
beforeMount (挂载之前)
编译模板,将通过vue生成的虚拟DOM数据和模板生成html,准备挂载到页面中
mounted (挂载之后)
将编译后的html内容替换为真实DOM对象,把模板中的html渲染到html页面中

说到这其中创建前后和挂载前后四个阶段,在页面第一次加载时就会触发,DOM渲染在mounted阶段中就已经完成

beforeUpdate (更新之前)
在虚拟DOM重新渲染和打补丁之前调用,在此钩子函数中,可进一步的进行更改,避免重复渲染过程
updated (更新之后)
在数据更改后虚拟DOM重新渲染和打补丁之后调用,因DOM已更改,可执行依赖于DOM的操作,不过应该避免在此更改,可能会更新无限循环
beforeDestroy (销毁之前)
在实例销毁之前调用,此时实例仍然可用
destroyed (销毁之后) (this.$destroy())
在实例销毁之后调用,会销毁所有的事件监听和数据,即子实例

activated(缓存)
deactivated
activated需要在keep-alive组件激活时调用,被keep-alive包裹使用
deactivated需要在keep-alive组件停用时调用
keep-alive组件是vue的内置抽象组件,主要作用是用于包裹动态组件,缓存不活动的组件实例
keep-alive组件子组件有三种渲染机制,首次渲染,组件切换,缓存渲染

errorCaptured(子孙)
errorCaptured 在捕获子孙组件的错误时被调用
会收到三个参数,错误对象,发生错误的组件实例和错误来源信息字符串,可返回false阻止错误向上传播
如一个组件的继承或父级链路中存在多子errorCaptured钩子,则会被相同的错误阻逐个唤起
如全局的config.errorHandler被定义,错误依旧会发送它,这些错误会向单一的分析服务的地方进行汇报

相信大家对这个图都很熟悉,简单通过图了解下,就不多说了

Vue生命周期解析_第1张图片

这里简单的用代码演示了一下四大阶段




    
    
    
    Document
    


    

生命周期

{{title}}

Vue生命周期解析_第2张图片

你可能感兴趣的:(Vue)