Vue生命周期

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 46 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaoyingzi/p/10940331.html

文章标签：

#javascript #ViewUI

本文介绍了Vue生命周期，其分为初始化、运行中、销毁3个阶段。初始化阶段有4个钩子函数，运行中阶段有2个，销毁阶段有2个。还说明了各钩子函数触发条件、作用及在项目中的使用场景，如数据请求、DOM操作等，最后提及组件销毁的两种方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue生命周期

生命是生命周期呢？

当前组件在创建到销毁经历的一系列过程，称之为生命周期

生命周期的分为几个阶段？每个阶段有哪些钩子函数

生命周期分为3个阶段，这三个阶段分别是：初始化、运行中、销毁
初始化阶段：有4个钩子函数， ***** 触发条件是自动的
- beforeCreate
  - 组件即将创建，进行组件事件和生命周期的初始化
    1. 项目中一般不使用
    2. 有的开发者也会在这里进行数据请求
    3. 这个阶段：组件创建前
      - data data选项中的数据获取不到
      - RDOM 拿不到
      - 项目中：没什么用
      - 但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
- created
  - 组件创建完成
  - 项目中：
    1. 异步请求接口数据
    2. 数据修改
    3. 这个阶段：
      - data data选项中的数据获到了
      - RDOM 拿不到
      - 项目中：
        数据的修改
        异步数据请求
- beforeMount
  - 组件即将挂载
  - 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
  - 项目中：
    1. 异步请求接口数据
    2. 数据修改
    3. 这个阶段：
      - data data选项中的数据获到了
      - RDOM 拿不到
      - 项目中：
        数据的修改
        异步数据请求
- mounted
  - 组件挂载结束
  - 使用真实DOM替换VDOM
  - 项目中
    1. 异步请求接口数据
    2. 数据修改
    3. 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
    4. 这个阶段：
      - data: 可以获得数据
      - RDOM: 拿到了
      - 项目中：
        数据修改
        异步数据请求
        真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的）)
- 总结：初始化过程中在项目中使用
  1. 数据请求：created
  2. DOM操作： mounted
  3. 数据修改： beforeMount created mounted
运行中阶段：有2个钩子函数 , 触发条件是： *******当data选项中的数据发生改变时
- beforeUpdate：
  - 这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
  - 表示组件即将更新 vdom --diff–> vdom的不同（patch对象）
  - 这个阶段：
    1. data: 拿到了
    2. RDOM：获得
      - updated
      - Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
      - 组件更新结束，通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
      - 动态数据的渲染，进行dom操作（第三方库的实例化）
销毁阶段：有2个钩子函数
- beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
- destoryed：组件销毁结束
- 这两个钩子函数没有什么去别，功能很相似
  1. 项目中：这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例
  2. 组件销毁的两种方式：

使用$destroy()方法（内部销毁）
缺点：会将组件的模板也保留下来
使用开关销毁（外部销毁）
v-if
这种类型的销毁不会留有模板

有一个钩子函数可以不写，这个钩子函数就是我们 render 函数

<div id="app">
<button @click = "flag = false"> 销毁 </button>
<Hello v-if = "flag"></Hello>
</div>
<template id="hello">
<div>
<input type="text" v-model = "money">
<h3> {{ money }} </h3>
</div>
</template>

Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
return {
money: 2000
}
},
//初始化
beforeCreate () {
/*
这个阶段：组件创建前
data data选项中的数据获取不到
RDOM 拿不到
项目中： 没什么用
但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
*/
console.log('1-beforeCreate')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
created () { // 组件创建结束
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 20000
console.log('2-created')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
beforeMount () { //组件即将挂载
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 10000000
console.log('3-beforeMount')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
mounted () { //组件挂载结束了
/*
这个阶段：
data: 可以获得数据
RDOM: 拿到了
项目中：
数据修改
异步数据请求
真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
*/
this.time = setInterval( () => {
console.log( 1 )
},1000)
document.querySelector('h3').style.background = 'red'
console.log('4-mounted')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同（patch对象）
/*
这个阶段：
data: 拿到了
RDOM： 获得
这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
*/
console.log(' 1- beforeUpdate ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
/*
这个阶段：
动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
*/
document.querySelector('h3').style.background = 'blue'
console.log(' 2- updated ')
console.log( 'data', this