vue的生命周期

最新推荐文章于 2024-07-22 11:56:16 发布

cdgogo

最新推荐文章于 2024-07-22 11:56:16 发布

阅读量796

点赞数 1

分类专栏： vue 文章标签： vue.js vue的生命周期

本文链接：https://blog.csdn.net/qq_36699230/article/details/121066125

版权

本文详细探讨了Vue实例从创建到销毁的各个生命周期阶段，包括创建（实例）、载入（数据）、更新和销毁。在创建阶段，介绍了created和beforeMount的区别，以及在不同阶段可以进行的操作，如初始化数据和操作DOM。在载入阶段，讨论了beforeMount和mounted的时机，以及何时适合进行DOM操作。在更新阶段，阐述了beforeUpdate和updated的用途。最后，讲解了销毁前和销毁后的生命周期钩子，以及在何时可以进行资源清理。此外，还提供了一些常见的面试题及答案，帮助读者更好地理解和应用Vue的生命周期。

摘要由CSDN通过智能技术生成

概念

借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
在这里插入图片描述

可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

一、创建（实例）

1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）
使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用
2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el）
使用场景：模板渲染成html前调用，此时可以获取data和methods，so 可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里

二、载入（数据）

1、beforeMount：是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建（有data，有el）
2、mounted：数据和DOM都已经被渲染出来了
使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

三、更新

1、beforeUpdate：检测到数据更新时，但在DOM更新前执行
2、updated：更新结束后执行
使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁

1、beforeDestroy：当要销毁vue实例时，在销毁前执行
2、destroyed：销毁vue实例时执行

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{
  {message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
</body>
<script src