Vue实例的生命周期钩子

最近在学习Vue，接触到了Vue的生命周期钩子，看了视频也百度了一些相关的，在这做一下笔记吧~

生命周期函数就是vue实例在某一个时间点会自动执行的函数

文章目录

- 涉及到的生命周期钩子
- 结合代码去理解钩子函数

涉及到的生命周期钩子

放上官方的生命周期图：
在这里插入图片描述
图上涉及到的生命周期钩子有8个

生命周期钩子	触发的行为	在这阶段可操作的例子
beforeCreate	vue实例的挂载元素$el和数据data都为undefined，还未初始化。	可在这加个loading事件
created	vue实例的数据data有了，$el还没有，DOM未生成	结束loading，还可做一些初始化，实现函数自执行
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，页面还未被渲染。先把坑占住，到后面mounted挂载的时候再把值渲染进去。
mounted	vue实例挂载完成，虚拟的DOM变成真实DOM	在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeUpdate	data中的数据发生改变，还没有重新渲染之前调用
updated	data中的数据发生改变，重新渲染之后调用	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁前调用	给用户提示，比如“您确定删除xxx吗？”
destroyed	组件销毁后调用，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	当前组件已被删除，清空相关内容

除了这8个还有另外2个

activated	使用keep-alive，组件被激活时调用，每次进入都会执行钩子中的函数
deactivated	使用keep-alive，组件被移除时调用

结合代码去理解钩子函数

附上大佬的代码，简洁易懂：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue实例的生命周期钩子</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{
   
   {message}}</p>
    <input type="button" @click="change" value="更新数据" />
  </div>
  <script>
    // 生命周期函数就是vue实例在某一个时间点会自动执行的函数
    var app = new Vue({
     
     
      el:'#app',
      data: {
     
     
        message : "Vue实例的生命周期钩子"
      },
      methods: {
     
     
        change(){
     
     
          this.message = '更新快更新'
        }
      },
      beforeCreate: function () {
     
     
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message);//undefined
        },
      created: function () {
     
     
          console.group('created 创建完毕状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el); //undefined
          console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
          console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
      },
      beforeMount: function () {
     
     
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 当前挂在的元素
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
      mounted: function () {
     
     
          console.group('mounted 挂载结束状态===============》');
          console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
          console.log(this.$el);
          console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
          console.log("%c%s", "color:green","message: " + this.message); //已被初始化
      },
      beforeUpdate: function () {
     
     
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
            alert("更新前状态2");
        },
      updated: function () {
     
     
          console.group('updated 更新完成状态===============》');
          console.log("%c%s", "color:green","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:green","data   : " + this.$data);
          console.log("%c%s", "color:green","message: " + this.message);
      },
      beforeDestroy: function () {
     
     
          console.group('beforeDestroy 销毁前状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red","data   : " + this.$data);
          console.log("%c%s", "color:red","message: " + this.message);
      },
      destroyed: function () {
     
     
          console.group('destroyed 销毁完成状态===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red","data   : " + this.$data);
          console.log("%c%s", "color:red","message: " + this.message)
      }
  })
  </script>
</body>
</html>

主要就是去查看打印出来的顺序和结果！！！效果：

在这里插入图片描述
另外在红框地方，我们能发现el还是 { {message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，页面还未被渲染，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

在这里插入图片描述
当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

注意beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发。因为Vue是数据驱动的。注意观察弹窗就容易发现。

destroyed钩子函数有一点一定要特别注意：在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。

注意：不要在生命周期钩子上使用箭头函数，如果生命周期使用了箭头函数，那么this就会指向window而不是当前Vue实例

最后附上参考链接：
https://www.cnblogs.com/xiaobaibubai/p/8383952.html
https://blog.csdn.net/qq_35585701/article/details/81216704