【7】Vue学习-生命周期

橙子太

已于 2024-01-10 18:50:42 修改

阅读量62

点赞数 1

文章标签： vue.js 学习前端

于 2023-05-22 09:32:19 首次发布

本文链接：https://blog.csdn.net/m0_54160307/article/details/130797473

版权

文章目录

一、引出生命周期
二、生命周期流程
三、总结

一、引出生命周期

Vue的生命周期和人一样，人的生命周期指的是：出生->成长->死亡这一个过程。而Vue的生命周期指的是我们的vm或者组件实例对象的一生：创建->挂载->更新->销毁 整个过程。总共涉及八个（四对）生命周期函数。下面讲述一下生命周期的几个概念。

1.生命周期是什么：Vue在关键时候帮我们调用的一些特殊名称的函数
1.生命周期又名：生命周期回调函数，生命周期函数、生命周期钩子。我们说生命周期就是说他的钩子函数
2.周期函数的名字不可更改，但是函数的具体内容程序员可自定义
4.生命周期函数中的this指向的是vm或者组件实例对象。

二、生命周期流程

Vue的生命周期可以分为三个阶段：创建阶段、更新阶段、销毁阶段。每个阶段都有它独有的钩子函数，下面我们会详细讲解他们的作用。Vue的生命周期流程如图所示。
在这里插入图片描述

1.创建阶段

Vue的创建过程指的是创建实例对象一直到挂载的整个阶段，整个过程会调用两对钩子函数，他们分别是：

将要创建阶段：beforeCreate(){}
创建完成阶段：created(){}
将要挂载阶段：beforeMount(){}
挂载完毕阶段：mounted(){}

当创建实例化对象之后，首先进行生命周期和事件的初始化，然后调用beforeCreate()函数。

beforeCreate()函数：

此时由于没有数据监测和数据代理，`无法通过vm访问到data中的数据、methods中的方法`

然后对数据检测和数据代理进行初始化，之后调用Created()函数。

Created()函数：

此时`可以通过vm访问到data中的数据、methods中配置的方法。`

之后Vue开始解析模板，生成虚拟DOM，这时候页面不能显示解析好的内容。主要会进行两个操作。

1.判断有无el,有则开始解析模板；没有则等调用vm.$mount(el)的时候开始解析.
2.判断vue实例中有无template这个功能函数，有的话则直接把template中的内容作为模板解析；
	没有则将<template></template>标签中的东西作为模板解析.

template功能函数在Vue2和Vue3中写法如下

template:`
	<div>
	vue2中必须有一个根元素	
	</div>
`
template:`
	vue3中不需要设置唯一根元素
`

模板解析完毕之后，调用beforeMount()函数

beforeMount函数：

1.页面呈现的是`未经Vue编译`的DOM结构
2.所有对DOM的操作，最终都不奏效

之后会将内存中的虚拟DOM转为真实DOM插入页面。这时将会调用mounted()函数

mounted()函数：

1. 页面中呈现的是`经过Vue编译`的DOM结构
2. 对DOM的操作均有效（尽量避免）

2.更新阶段

Vue是一个响应式布局，在更新阶段，数据发生改变的时候，页面会随之更新，更新阶段流程如下：

当诗句发生改变的时候，调用beforeUpdate()函数

beforeUpdate函数：

此时`数据是新的，但是页面是旧的`，页面和数据没有保持同步

之后，Vue根据新的数据，生成新的虚拟DOM,与旧的DOM进行比较之后，页面会更新不同之处。这时就完成了Model->View的更新（MVVM模型），之后调用updated()函数，之后一直等待下一次数据变化，更新阶段可以一直执行。

updated()函数：

此时`数据是新的，页面也是新的`，页面和数据保持同步

3.销毁阶段

销毁阶段使用很少，具体流程为：首先调用beforeDestroy()函数，不管Vue的生命是他杀还是自杀，我们都是通过调用beforeDestroy()函数，然后在它里面自定义。

beforeDestroy()函数：

1.此时，`vm中所有的:data、methods、指令等等都是可用状态`，马上要执行销毁过程
2.在这里，通常进行关闭定时器、取消订阅消息、解绑自定义事件等收尾操作

之后调用 destroyed() 函数，销毁阶段结束

三、总结

对于了解整个流程之后，我们只需要会使用几个关键的钩子函数即可。这里需要说明除了更新阶段的一对钩子函数之外，其余只能调用一次。生命周期钩子流程总结如下：

Vue的生命周期：
		将要创建===>调用beforeCreate()函数
		创建完毕===>调用created()函数
		将要挂载===>调用beforeMount函数
  `(重要)挂载完毕===>调用mounted函数===========>【重要的钩子】`
		将要更新===>调用beforeUpdate()函数
		更新完毕===>调用updatad函数
  `(重要)将要销毁===>调用beforeDestroy函数========>【重要的钩子】`
		销毁完毕===>调用destroyed函数