（七）Vue - Vue实例的生命周期_vue实例的生命周期是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33810743/article/details/107143573

（七）Vue - Vue实例的生命周期

- - 什么是生命周期
  - 生命周期函数

什么是生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子：就是生命周期事件的别名
生命周期钩子 = 生命周期函数 = 生命周期事件

借用官方文档的生命周期图，本文主要讲解Vue生命周期函数
在这里插入图片描述

生命周期函数

对生命周期函数进行分类

创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
- beforeMount：此时已经在内存中完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

下面这段代码附带有相应的注释以及执行结果，大家可以运行验证，看是否和自己的预期相符合。

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

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '我是msg'
      },
      methods: {
        show() {
          console.log('执行了show方法')
        }
      },
      //在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
      beforeCreate() {
        console.log(this.msg)  //undefined
        //this.show()   //[Vue warn]: Error in beforeCreate hook: "TypeError: this.show is not a function"
      },
        //  在 created 中，data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
      created() {
        console.log(this.msg)   //我是msg
        this.show() //执行了show方法
      },
      //表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中
      // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
      beforeMount() { 
        console.log(document.getElementById('h3').innerText) //{{ msg }}
      },
      // 内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面
      // 在这个生命周期，实例已经被完全创建好了，这里是最合适做相关初始化操作的生命周期
      mounted() { 
        console.log(document.getElementById('h3').innerText)  //我是msg
      },
      // 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
      beforeUpdate() {
         console.log('界面上元素的内容：' + document.getElementById('h3').innerText)   //我是msg
        console.log('data 中 msg 数据是：' + this.msg)  //修改后的msg
      },
      // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
      updated() {
        console.log('界面上元素的内容：' + document.getElementById('h3').innerText) //修改后的msg
        console.log('data 中 msg 数据是：' + this.msg)  //修改后的msg
      }
    });
  </script>
</body>

注意：
看网络上，有人反馈beforeMount打印不出页面上的元素。
那么$el 什么时候能打印出来？

当在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标el时，在 beforeMount 时可以打印出来；当不存在时，在 mounted 阶段可以打印出来:

在这里插入图片描述
由上图可以看到在此阶段是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。在这之前console中打印的结果可以看到beforeMount之前el上还是undefined。
而在beformount阶段，是通过{{msg}}进行占位的，因为此时还没有挂载到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到div中的内容发生了变化。
总结：beformount：虚拟dom创建完成
mounted：渲染出真实dom，组件已经出现在页面中，数据，事件，都DOM都处理好了