Vue的生命周期

一、什么是Vue生命周期?
Vue实例从创建到销毁的过程,就是Vue的生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom – > 渲染、更新–>渲染、卸载等一系列过程,我们称这是Vue的生命周期。

二、vue生命周期的作用是什么?
它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

三、第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子,其中DOM渲染在 mounted 中就已经完成了

四、生命周期详解

1.beforeCreate在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用

2.created在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见

3.beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用

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

5.beforeUpdate数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器
该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行

6.updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM
的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher取而代之。

7.activatedkeep-alive 组件激活时调用。 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
该钩子在服务器端渲染期间不被调用

8.deactivatedkeep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用

9.beforeDestory实例销毁之前调用。在这一步,实例仍然完全可用。频繁的创建和销毁组件对性能的影响很大,因此可以使用activateddeactivated
该钩子在服务器端渲染期间不被调用

10.destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
该钩子在服务器端渲染期间不被调用

五、Vue生命周期的执行过程

1、实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期

2、在创建Vue实例的时候,执行了init()初始化方法,在init过程中首先调用了beforeCreate钩子函数

3、同时监听data数据,初始化vue内部事件,进行属性和方法的计算,这个时候,数据还没有挂载呢,只是一个空壳,无法访问到数据和真实的dom,一般不做操作挂载数据,绑定事件等等

4、以上都干完了,调用Created钩子函数,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,在这里可以在渲染前倒数第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

5、模板编译,把data对象里面的数据和vue语法利用虚拟dom放入到render函数中准备渲染

6、编译模板完成,调用beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

7、render函数执行之后,将渲染出来的内容挂载到DOM节点

8、挂载结束,调用Mounted钩子函数此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom

9、当组件或实例的数据更改之后,立即执行beforeUpdate钩子函数,重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,一般不做什么事儿

10、更新完成,执行Updated钩子函数,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom

11、当经过某种途径调用$destroy方法后,调用beforeDestory一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等组件的数据绑定、监听…去掉后只剩下dom空壳

12、Destoryed实例销毁;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值