vue——生命周期_uptadevue-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43370373/article/details/118547295

本文详细介绍了Vue.js实例从创建到销毁的生命周期过程，包括beforeCreate、created、beforeMount、mounted等关键阶段，并通过实际代码演示了如何在每个阶段操作数据和DOM。

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

Vue实例的生命周期

什么是生命周期：

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的时间，这些事件，都统一称为生命周期！

生命周期钩子：

就是生命周期时间的别名而已；生命周期钩子=生命周期函数=生命周期函数

主要的生命周期函数分类：

创建期间的生命周期函数：

1、beforeCreate:实例已经在内存中被创建出来，此时，还没有初始化好data和methods属性
2、created：实例已经在内存中创建好了，此时的data和methods已经创建好了，只是还没有开始编译模板
3、beforeMount:此时已经完成了模板编译，但是还没挂载到页面中
4、mounted：此时，已经将编译好的模板挂载到了页面指定的容器中显示

运行期间的生命周期函数：

1、beforeUpdate:状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的，数据还是旧的，因为此时还没有开始渲染DOM节点
2、updated：实例更新之后调用此函数，此时的data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了

销毁期间的生命周期函数：

1、beforeDestroy:实例销毁之前调用，在这一步，实例仍然完全可用
2、destroyed:Vue实例销毁后调用。调用后Vue实例指示的所有东西都会解除绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期</title>
  <style>
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="修改message" @click="message='ok'"></input>
    <h3 id="h3">{{message}}</h3>

  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 创建vue实例
    var app = new Vue({
      el: "#app",
      data: {
        message: "今天也要加油哦"
      },
      methods: {
        show() {
          console.log("执行了show方法")
        }
      },
      beforeCreate() {   //遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
        //  console.log(this.message)
        // this.show()
        // 注意：在 beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化
      },
      created() {    //这是遇到的第二个生命周期函数
        // console.log(this.message)  
        // this.show() 
        // 在created中，data和methods都可以初始化好了
        // 如果要调用methods中的方法或者操作data中的数据，最早只能在created中操作
      },
      beforeMount() {  // 这个是遇到的第三个生命周期函数，表示模板已经在内存中编译完成，但是模板未渲染到页面当中
        //  console.log(document.getElementById('h3').innerText)
        //  在beforeMount执行的时候，页面中的元素，还没有被真正的替换过来，只是之前写的一些模板字符串
      },
      mounted() {     // 这个是遇到的第四个生命周期函数，表示内存中的模板已经真实的挂载到了页面当中，用户已经可以看到渲染好的页面了
        // console.log(document.getElementById('h3').innerText)
        // 注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时如果没有其他实例的话，这个实例就静静的躺在内存中一动不动
      },
      // 以下就是运行中的两个事件
      beforeUpdate() {   // 这时候表示界面还没有被更新，但是数据已经被更新了
        // console.log('界面上的元素内容:' + document.getElementById('h3').innerText)
        // console.log('data中的message是:' + this.message)
        // 得出结论：当执行beforeUptade的时候，页面中的显示数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持一致
      },
      updated() {
        // console.log('界面上的元素内容:' + document.getElementById('h3').innerText)
        // console.log('data中的message是:' + this.message)
        // updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
      }
    });
  </script>
</body>

</html>