vue3里面生命周期的使用

SwJieJie2023-12-06 8:15

前言：

vue2里面的生命周期和vue3生命周期是非常的相似的，我们通过访问生命周期钩子来处理不同场景之间的应用。

生命周期钩子的函数定义：每一个Vue组件实例 在创建时都需要经历 一系列的初始化步骤 ，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中的阶段我们称为是生命周期钩子函数。

这里我们使用的vue3 生命周期函数为组合式API下的生命周期函数 的。【组合式写法没有 beforeCreate / created 生命周期，并且组合式写生命周期用哪个先引哪个】。

备注：在这里，beforecreate 和 created 被 setup 方法本身所替代。

vue2 里面的生命周期函数是选项式API下的生命周期函数，里面就包含 beforeCreate / created 生命周期。

一、选项式和组合式下的生命周期函数对比如下


主要 Vue 生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue 应用程序中有4个主要事件(8个钩子)：

  • 创建 ---- 在组建创建时执行
  • 挂载 ---- DOM 被挂载时执行
  • 更新 ---- 当响应数据被修改时执行
  • 销毁 ---- 在元素被销毁之前立即执行
    在【options API】中，生命周期钩子是被暴露在 vue 实例上的选项，我们只需要调用使用即可。

在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。

二、生命周期函数分为哪几种，具体作用和用法如下：

1、beforeCreate

  1. beforeCreate选项式声明周期函数
  2. 在组件实例初始化之前调用（props解析已解析、data和computed等选项还未处理）
  3. 不能访问组件的实例this及其组件中的数据源和函数等
  4. 不能访问组件中的视图DOM元素
  5. 组合式 API 中的setup()钩子会在所有选项式 API 钩子之前调用

选项式写法如下：

javascript 复制代码 
    // 组件实例话之前
    // 可以访问 props 的数据的
    // 不能访问组件的实例 this 中的数据源和函数等
    // 不能访问组件中的视图DOM元素
 beforeCreate() {
   console.log('----------------------------')
     console.log('beforeCreate 组件实例话之前')
     console.log(this.$props.subtitle)
     console.log('不能访问组件的实例 this 中的数据源和函数等');
     console.log('不能访问组件中的视图DOM元素');
     // console.log(this.age)
     // this.showMessage()
     // console.log(document.getElementById('title').innerHTML)
 }

2、created

  1. created选项式生命周期函数
  2. 在组件实例化成功后调用
  3. 可访问组件的实例this及其组件中的数据源和函数等
  4. 不能访问组件中的视图DOM元素

选项式写法如下：

javascript 复制代码 
	// 组件视图渲染之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

3、beforeMount/onBeforeMount

  1. beforeMount：选项式生命周期函数、onBeforeMount：组合式生命周期钩子
  2. 组件视图在浏览器渲染之前调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 不能访问组件视图中的DOM元素

选项式写法：

javascript 复制代码 
 	 // 组件视图渲染之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },

组合式写法：

javascript 复制代码 
import { onBeforeMount} from 'vue'
// 组件视图渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {
    console.log('------------------------')
    console.log('onBeforeMount 组件视图渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

4、mounted/onMounted

  1. mounted：选项式生命周期函数、onMounted：组合式生命周期钩子
  2. 组件视图在浏览器渲染之后调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 可以访问组件视图中的DOM元素

选项式写法：

javascript 复制代码 
  // 组件视图渲染之后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    mounted() {
        console.log('----------------------------')
        console.log('mounted 组件视图渲染之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    }

组合式写法：

javascript 复制代码 
import { onMounted} from 'vue'
// 组件视图渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 可以访问组件视图中的 DOM 元素
onMounted(() => {
    console.log('------------------------')
    console.log('onMounted 组件视图渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

5、beforeUpdate/onBeforeUpdate

  1. beforeUpdate：选项式生命周期函数、onBeforeUpdate：组合式生命周期钩子
  2. 数据源发生变化时，组件视图重新渲染之前调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 可以访问该组件中在更新之前的DOM元素，但是不能访问该组件中在更新之后的DOM元素

选项式写法：

javascript 复制代码 
 // 数据源发生改变，视图重新渲染前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之前的状态
    beforeUpdate() {
        console.log('----------------------------')
        console.log('beforeUpdate 数据源发生改变，视图重新渲染前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法：

javascript 复制代码 
import { onBeforeUpdate } from 'vue'
// 数据源发生变化，组件视图重新渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {
    console.log('------------------------')
    console.log('onBeforeUpdate 数据源发生变化，组件视图重新渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

6、updated/onUpdated

  1. updated：选项式生命周期函数、onUpdated：组合式生命周期钩子
  2. 数据源发生变化时，组件视图重新渲染之后调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 不可以访问该组件中在更新之前的DOM元素，但是可以访问该组件中在更新之后的DOM元素

选项式写法：

javascript 复制代码 
 // 数据源发生改变，视图重新渲染后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之后的状态
    updated() {
        console.log('----------------------------')
        console.log('updated 数据源发生改变，视图重新渲染后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法：

javascript 复制代码 
import { onUpdated } from 'vue'
// 数据源发生变化，组件视图重新渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {
    console.log('------------------------')
    console.log('onUpdated 数据源发生变化，组件视图重新渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

7、beforeUnmount/onBeforeUnmount

  1. abeforeUnmount：选项式生命周期函数、onBeforeUnmount：组合式生命周期钩子
  2. 组件实例被卸载之前调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 可以访问组件视图中的DOM元素

选项式写法：

javascript 复制代码 
// 组件在卸载之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访组件视图的 DOM 元素
    beforeUnmount() {
        console.log('----------------------------')
        console.log('beforeUnmount 组件在卸载之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },

组合式写法：

javascript 复制代码 
import { onBeforeUnmount } from 'vue'
// 组件卸载之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {
    console.log('------------------------')
    console.log('onBeforeUnmount 组件卸载之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

8、unmounted/onUnmounted

  1. unmounted：选项式生命周期函数、onUnmounted：组合式生命周期钩子
  2. 组件实例被卸载之后调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 不可以访问组件视图中的DOM元素
  5. 一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、DOM事件监听器或者与服务器的连接

选项式写法：

javascript 复制代码 
// 组件已卸载
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不可访组件视图的 DOM 元素
    unmounted(){
        console.log('----------------------------')
        console.log('unmounted 组件已卸载')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    }

组合式写法：

javascript 复制代码 
import { onUnmounted} from 'vue'
// 组件卸载之后
// 能访问组件实例的东西（数据源、函数等）
// 不能访问组件视图 DOM 元素
onUnmounted(() => {
    console.log('------------------------')
    console.log('onUnmounted 组件卸载之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

总结：

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程 ，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

相关推荐
EnCi Zheng16 分钟前
M5-markconv自定义CSS样式指南 [特殊字符]
前端·css·python
kyriewen20 分钟前
你的网页慢，用户不说直接走——前端性能监控教你“读心术”
前端·性能优化·监控
广州华水科技20 分钟前
北斗GNSS变形监测在大坝安全监测中的应用与优势分析
前端
前端老石人32 分钟前
前端开发中的 URL 完全指南
开发语言·前端·javascript·css·html
CAE虚拟与现实32 分钟前
五一假期闲来无事，来个前段、后端的说明吧
前端·后端·vtk·three.js·前后端
Sarvartha43 分钟前
三目运算符
linux·服务器·前端
晓晨的博客1 小时前
ROS1录制的bag包转换为ROS2格式
前端·chrome
Wect1 小时前
LeetCode 72. 编辑距离：动态规划经典题解
前端·算法·typescript
donecoding1 小时前
别再让 pnpm 跟着 nvm 跑了！独立安装终极指南
前端·node.js·前端工程化
GISer_Jing1 小时前
AI全栈转型_TS后端学习路线
前端·人工智能·后端·学习
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04裂开！ChatGPT 居然开始要手机号验证，附详细解决方法05Codex 接入 DeepSeek API 完整配置文档062026年AI前瞻：量子AI、具身智能与科学发现的新纪元07零基础教你claude code 接入 deepseek V408在Windows 11上安装Docker的踩坑记录09实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲10CC-Switch & Claude 基于 Linux 服务器安装使用指南