Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

原创

已于 2025-03-31 20:49:27 修改 · 1.3k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-08-18 17:53:49 首次发布

1、Vue 2.0 生命周期钩子

每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。应用程序实例中几个主要的生命周期钩子函数的说明如下：

钩子函数	说明
beforeCreate()	在实例初始化之后且数据观测和事件/监听器配置之前调用。
created()	在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。
beforeMount()	在挂载开始之前进行调用，此时 DOM 还无法操作。
mounted()	在 DOM 文档渲染完毕之后进行调用。相当于 JavaScript 中的 windos.onload() 方法。
beforeUpdate()	在数据更新时进行调用，适合在更新之前访问现在的 DOM，如手动移除已添加的事件监听器。
updated()	在数据更新导致的虚拟 DOM 被重新渲染时进行调用。
beforeDestroy()	在销毁实例之前进行调用，此时实例仍然有效。此时可以解绑一些使用 addEventListener 监听的事件等。
destroyed()	在实例被销毁之后进行调用。

【实例】使用生命周期钩子，了解 Vue.js 内部的运行机制。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue生命周期钩子</title>
</head>

<body>
    <div id="app">