vue生命周期浅析，让你的前端开发如虎添翼

水星记_

已于 2023-05-24 17:17:39 修改

阅读量1.9k

点赞数 7

分类专栏： vue 文章标签：前端 vue

于 2021-06-23 09:18:54 首次发布

本文链接：https://blog.csdn.net/Shids_/article/details/118143204

版权

vue 专栏收录该内容

38 篇文章 23 订阅

订阅专栏

前言

vue 是一款流行的前端框架，而生命周期则是 vue 的核心之一。在本文中，我将带大家深入了解 vue 中的生命周期，探究其实现原理及应用场景，让你更好地掌握 vue 的开发技巧。

在这里插入图片描述

生命周期钩子函数

通俗来讲，其实 vue 的生命周期就是实例从创建到销毁的过程。开始创建、初始化数据、编译模板、挂载 dom、渲染、更新、销毁等一系列过程，称之为 vue 的生命周期。而钩子函数可以说是 vue 生命周期中每个阶段对外开放让开发者操作 vue 的一些方法实例。

1. beforeCreate 组件实例创建前

在 beforeCreate 钩子函数中，vue 实列还没有挂载完成，此时的 this 是获取不到的，$el 还不可用，data 中的数据也是获取不到的，页面中的真实 dom 节点也没有挂载出来。

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
    };
  },
  beforeCreate() {
    console.log(this.msg); // undefined
    console.log(this.$el); // undefined
  },
};
</script>

2. created 组件实例创建后

在 created 钩子函数中，vue 实例中的 data 和 method 已被初始化，属性也被绑定，但是此时还是虚拟 dom，真实 dom 还没生成，$el 还不可用。但是可以调用 data 和 method 的数据及方法，created 钩子函数也是最早可以调用 data 和 method 的。

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
    };
  },
  created() {
    console.log(this.msg); // data数据
    console.log(this.$el); // undefined
  },
};
</script>

3. beforeMount 渲染dom前

在 beforeMount 钩子函数中，模板已经编译完成，但还没有被渲染至页面中，可以获取 this 与 data 中的数据，即将可以获取到真实的 dom。

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
    };
  },
  beforeMount() {
    console.log(this.msg); // data数据
    console.log(this.$el); // undefined
  },
};
</script>

4. mounted 渲染dom后

在 mounted 钩子函数中，模板已经被渲染成真实 dom，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示 data 中的数据，数据挂载完毕。

<template>
  <div class="box"></div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
    };
  },
  mounted() {
    console.log(this.msg); // data数据
    console.log(this.$el); // <div data-v-7ba5bd90 class="box"></div>
  },
};
</script>

小结1

至此，创建 vue 实例完成。

<template>
  <div class="box"></div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
    };
  },
  // 组件实例创建前
  beforeCreate() {
    console.log(this.msg); // undefined
    console.log(this.$el); // undefined
  },
  // 组件实例创建后
  created() {
    console.log(this.msg); // data数据
    console.log(this.$el); // undefined
  },
  // 挂载dom前
  beforeMount() {
    console.log(this.msg); // data数据
    console.log(this.$el); // undefined
  },
  // 挂载dom后
  mounted() {
    console.log(this.msg); // data数据
    console.log(this.$el); // <div data-v-7ba5bd90 class="box"></div>
  },
};
</script>

控制台打印结果

在这里插入图片描述

5. beforeUpdate 数据更新前

在 beforeUpdate 钩子函数中，是更新前的状态，但是是 view 层的数据变化前，不是 data 中的数据改变前，重新渲染之前触发，然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染。beforeUpdate 并不会主动调用，在 dom 挂载完成后，只有在数据更新时，监听到数据的变化才会执行，但在次钩子函数中，获取到的数据是数据更行之前的数据。

<template>
  <div class="box">{{num}}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
      num: 0,
    };
  },
  mounted() {
    this.num++;
  },
  beforeUpdate() {
    console.log(this.$el); // <div data-v-7ba5bd90 class="box">1</div>
    console.log(this.$data); // {msg: "data数据",num:0}
  },
};
</script>

6. updated 数据更新后

在 updata 钩子函数中，数据已经更改完成，且生成新的虚拟 dom，与上一次的虚拟 dom 结构进行对比，比较出来差异（diff算法），再去进行真实 dom 的重新渲染操作。updated 中真实 dom 里面显示的数据跟内存中 data 里面的数据趋于一致。

<template>
  <div class="box">
    <button @click="dotOn">点击我</button>
    <div>{{msg}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
    };
  },
  methods: {
    dotOn() {
      this.msg = "更新数据！！！";
    },
  },
  updated() {
    console.log(this.$el);
    console.log(this.msg);
  },
};
</script>

控制台打印结果

在这里插入图片描述

7. beforeDestroy 组件实例销毁前

在 beforeDestroy 钩子函数中，是组件销毁前执行，会触发执行 vm.$destroy() 方法，然后组件被销毁。

<template>
  <div class="box">
    <router-link to="./b"><button>点击离开该页面</button></router-link>
    <div>{{msg}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "data数据",
    };
  },
  beforeDestroy() {
    this.msg = "离开之前更新数据！！！";
    console.log(this.msg);
  },
};
</script>

控制台打印结果

在这里插入图片描述

8. destroyed 组件实例销毁后

在 destroyed 钩子函数中，组件销毁完成。dom 仍然元素存在，只是不再受 vue 控制，卸载 watcher，事件监听，子组件。

<template>
  <div class="box">
    <router-link to="./b"><button>点击离开该页面</button></router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    let loginForm = {
      userNmae: "sds",
      password: "123",
    };
    sessionStorage.setItem("userKey", JSON.stringify(loginForm));
  },
  destroyed() {
    window.sessionStorage.removeItem("userKey");
  },
};
</script>