Vue生命周期（初始阶段、挂载阶段、更新阶段、销毁阶段）

目录钩子函数Vue生命周期之初始化阶段Vue生命周期之挂载阶段Vue生命周期之更新阶段Vue生命周期之销毁阶段代码执行：首先，我们了解一下"生命周期"这个词。通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。钩子函数【解释】：钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行

The..Fuir

11443人浏览 · 2022-05-18 23:13:30

The..Fuir · 2022-05-18 23:13:30 发布

目录

钩子函数

Vue生命周期之初始化阶段

Vue生命周期之挂载阶段

Vue生命周期之更新阶段

Vue生命周期之销毁阶段

代码执行：

首先，我们了解一下"生命周期"这个词。

通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。

在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。

钩子函数

【解释】：

钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行
【作用】：

特定的时间，执行特定的操作
【分类】：

四大阶段，八大方法
阶段   方法名   方法名
初始化   beforeCreate   created
挂载   beforeMount   mounted
更新   beforeUpdate   updated
销毁   beforeDestroy   destroyed

Vue生命周期之初始化阶段

【图示】：

new Vue()： Vue实例化对象(组件也是一个的vue实例化对象)
Init Events & Lifecycle：初始化事件和生命周期函数
beforeCreate：生命周期函数被执行此时不能访问data和menthods等中的东西
Init injections&reactivity：vue内部添加data和methods等
created：生命周期钩子函数被执行，实例创建此时能访问data和menthods等中的东西
接下来开始编译模板：开始分析
Has el option? ：是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项
【el选项挂载点图解】：
<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
    <div id="app">{{msg}}</div>

    <script>
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        methods: {},
      });
    </script>
  </body>
</html>
Vue生命周期之挂载阶段

【图解挂载阶段】：

template选项检查:
有：编译template返回render渲染函数
无：编译el选项对应标签作为template(要渲染的模板）vue工程项目不支持
虚拟DOM挂载成真实DOM之前:
beforeMount ：生命周期钩子函数被执行
Create vm$el and replace "el" with it：把虚拟DOM和渲染的数据一并挂到真实DOM上
挂载完毕，mounted：生命周期钩子函数被执行

Vue生命周期之更新阶段

【更新图解】：

当data里数据改变, 更新DOM之前，beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom

Virtual DOM re-render and patch：虚拟DOM重新渲染, 打补丁到真实DOM

updated – 生命周期钩子函数被执行

当有data数据改变 – 重复这个循环

Vue生命周期之销毁阶段

【图解销毁】：

当$destroy()被调用：比如组件DOM被移除(例v-if)

beforeDestroy：生命周期钩子函数被执行

拆卸数据监视器、子组件和事件侦听器

实例销毁后, 最后触发一个钩子函数

destroyed：生命周期钩子函数被执行

代码执行：
<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg}}
      <button @click="test">按钮</button>
      <ul id="My">
        <li>111</li>
      </ul>
    </div>

    <script>
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          //   time: new Date(),
          msg: true,
        },
        methods: {
          test() {
            console.log("点击按钮-----");
          },
        },
        //钩子函数,生命周期，在beforeCreate这个阶段，
        //现在属性msg数据还没有绑定到实例对象vm上，所以数据不能输出来
        //钩子函数在new Vue()之后执行 Vue内部给实例添加了一些属性(data)和方法(methods)
        //钩子函数在data和methods之前执行

        beforeCreate() {
          //属性或方法声明了，但没有和实例绑定
          console.log(
            "beforeCreated函数执行了,---但此时获取不到实例内的属性和方法",
            this.msg
          ); //输出：undefined
        },
        //生命周期，在created这个阶段属性msg数据绑定到vm实例对象上
        //data和methods之后执行
        created() {
          //属性和方法绑定到实例上，可以通过实例进行调用
          console.log(
            "created执行了,---此时可以获取data和methods中的变量值",
            this.msg
          ); //输出：'hello
        },

        /* 2.挂载 */
        //虚拟dom挂载成真实dom之前,不可以操作dom
        //使用场景，预处理data,不会触发update钩子函数
        beforeMount() {
          console.log(
            "beforeMount执行了,---但此时获取不到真实的DOM节点",
            "挂载之前"
          );
          console.log(document.getElementById("app"));
        },
        //虚拟dom挂载完毕变成真实dom,此处可以可以操作dom节点
        mounted() {
          console.log("mounted执行了,---此时可以获取到真实的DOM", "挂载后");
          console.log(document.getElementById("app"));
        },

        /*2.更新*/
        //更新前
        beforeUpdate() {
          console.log(document.querySelectorAll("#My>li"));
          console.log(
            "beforeUpdate函数执行了,---此时获取不到更新的真实DOM",
            this.msg
          );
        },
        //更新后
        //场景：获取到更新的真实DOM节点
        updated() {
          console.log(document.querySelectorAll("#My>div"));
          console.log(
            "update函数执行了,---此时可以获取到更新的真实DOM",
            this.msg
          );
        },

        /*销毁*/
        //销毁监听
        beforeDestroy() {
          console.log("beforeDestroy函数执行了", this.msg);
        },
        destroyed() {
          console.log("destroy函数执行了", this.msg);
        },
      });
      setInterval(() => {
        vm.$destroy();
      }, 5000);
    </script>
  </body>
</html>
输出结果解释：

因为像更新一样，更新的时间很短很快，在beforeUpdate和updated里面都能访问到修改后的

挂载的时间也很快，很短，当然显示的也很快，所以显示并不一定能显示dom节点出来或者dom节点都可以显示出来，亦或者挂载前显示不出来挂载后就显示出来了