vue组件的生命周期

一、组件运行的过程

开始--》import导入组件--》components注册组件--》以标签形式使用组件--》在内存中创建组建的实例对象--》把创建的组件实例渲染到页面上--》组件切换时销毁需要被隐藏的组件--》结束

组件的生命周期指的是:组件从创建、运行(渲染)、销毁的整个过程,强调的是一个时间段。

二、监听组件的不同时刻

vue框架为组件内置了不同时刻的生命周期函数,生命周期函数会伴随着组件的运行而自动调用。

1.当组件在内存中被创建完毕后,会自动调用created函数

2.当组件被成功渲染到页面上之后,会自动调用mounted函数

3.当组件被销毁完毕后,会自动调用unmounted函数

三、监听组件的更新

当组件的data数据更新后,vue会自动重新渲染组件的dom结构,从而保证view视图展示的数据和model数据源保持一致。

当组件被重新渲染完毕后,会自动调用updated生命周期函数。

四、组件中主要的生命周期函数

|-----------|----------------|------|------|-------------|
| 生命周期函数 | 执行时机 | 所属阶段 | 执行次数 | 应用场景 |
| created | 组件在内存中创建完毕后 | 创建阶段 | 唯一1次 | 发ajax请求初始数据 |
| mounted | 组件初次在页面中渲染完毕后 | 创建阶段 | 唯一1次 | 操作dom元素 |
| updated | 组件在页面中被重新渲染完毕后 | 运行阶段 | 0或多次 | - |
| unmounted | 组件被销毁后(页面和内存) | 销毁阶段 | 唯一1次 | - |

在实际开发中,created是最常用的生命周期函数。

五、完整的生命周期函数

|---------------|----------------|------|------|-------------|
| 生命周期函数 | 执行时机 | 所属阶段 | 执行次数 | 应用场景 |
| beforeCreate | 在内存中开始创建组件之前 | 创建阶段 | 唯一1次 | - |
| created | 组件在内存中创建完毕后 | 创建阶段 | 唯一1次 | 发ajax请求初始数据 |
| beforeMount | 在把组件初次渲染到页面之前 | 创建阶段 | 唯一1次 | - |
| mounted | 组件初次在页面中渲染完毕后 | 创建阶段 | 唯一1次 | 操作dom元素 |
| beforeUpdate | 在组件被重新渲染之前 | 运行阶段 | 0或多次 | - |
| updated | 组件在页面中被重新渲染完毕后 | 运行阶段 | 0或多次 | - |
| beforeUnmount | 在组件被销毁之前 | 销毁阶段 | 唯一1次 | - |
| unmounted | 组件被销毁后(页面和内存) | 销毁阶段 | 唯一1次 | - |

为什么不在beforeCreate中发ajax请求初始数据?

在beforeCreate中,无法访问到data里面数据,请求到的数据无法挂载到da'ta中供组件渲染使用

操作dom在mounted函数中

javascript 复制代码
<template>
  {{ count }}
  <button @click="count+=1">按钮</button>
</template>
<script>
export default {
  data(){
    return{
      count:1
    }
  },
  beforeCreate(){
    console.log('beforeCreate,在内存中开始创建组件之前',this.count);
  },
  created(){
    console.log('created,组件在内存中被创建了',this.count);
  },
  beforeMount(){
    console.log('beforeMount,在把组件初次渲染到页面之前');
  },
  mounted(){
    console.log('mounted,组件第一次被渲染到页面上了');
  },
  beforeUpdate(){
    console.log('beforeUpdate,在组件被重新渲染之前');
  },
  updated(){
    console.log('updated,组件被重新渲染完毕了');
  },
  beforeUmounte(){
    console.log('beforeUmounte,组件被销毁之前');
  },
  unmounted(){
    console.log('unmounted,组件被销毁完毕了');
  }
}
</script>
相关推荐
Devil枫3 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦37 分钟前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子1 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果2 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰3 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端