yuanyuanbyte/Blog

Vue系列之第一次页面加载会触发哪几个钩子

yuanyuanbyte opened this issue · 0 comments

yuanyuanbyte commented

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

vue 第一次页面加载会触发哪几个钩子

页面首次渲染会触发 beforeCreate， created， beforeMount， mounted这四个钩子函数。

写一个测试demo来直观的查看首次渲染会触发的钩子：

<template>
  <div>
    <p>{{foo}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      foo: "foo"
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    setTimeout(() => {
      this.foo = "fooooooo";
    }, 2000);
    console.log("monnted" + this.$el);
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  }
};
</script>

注意 ❗ ❗ ❗ 这个实例在 mounted 钩子中加了一个定时器，用来验证beforeUpdate、updated 这两个钩子响应时机.

查看控制台如下：

在这里插入图片描述

可以发现，页面首次渲染会触发beforeCreate、created、beforeMount 、mounted这四个钩子函数。

页面加载完成的 2 秒后更新了一下数据，可以看到 data 更新后才会先后触发beforeUpdate、updated这两个钩子。

用户主动vm.$destory()要销毁页面后会触发 beforeDestroy、destroyed

查看全部文章

博文系列目录

  • JavaScript 深入系列
  • JavaScript 专题系列
  • JavaScript 基础系列
  • 网络系列
  • 浏览器系列
  • Webpack 系列
  • Vue 系列
  • 性能优化与网络安全系列
  • HTML 应知应会系列
  • CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

weixin