网站首页 » 前端开发 » Vue » Vue2 生命周期钩子
上一篇:
下一篇:

Vue2 生命周期钩子

前言

不管是 Angualr 还是 Vue,都会有自己的生命周期勾子,有了这些勾子函数,我们就可以很容易地云在特定的时刻执行一些相关的操作。比如在数据更时,在组件销毁时等等。

下面我们先来看一个官方给我们提供的一个生命周期勾子的显示图:

Vue 生命周期钩子

看完这个图我相信你已经知道 Vue 的生命周期有了大概的认识。为了让你更直观地知道这些生命周期勾子函数都是什么时候触发的,下面我写了一个简单的示例,运行下面的代码:

Demo.vue
<template>
  <div class="container">
     <p>{{message}}</p>
     <button @click="change" class="btn btn-primary">改变数据</button>
     <button @click="show" class="btn btn-primary">显示隐藏</button>
     <router-link to="/home" class="btn btn-primary">跳转</router-link>
     <yk-son v-show="status"></yk-son>
  </div>
</template>
<script>
import ykSon from "@/components/Son";
export default {
  name: "Demo",
  components: { ykSon },
  data() {
    return {
      message: "云库网",
      status: false
    };
  },
  methods: {
    show() {
      this.status = !this.status;
    },
    change() {
      this.message = "http://yunkus.com";
    }
  },
  beforeCreate() {
    console.log("%c======== beforeCreated ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  created() {
    console.log("%c======== created ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  beforeMount() {
    console.log("%c======== beforeMount ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  mounted() {
    console.log("%c======== mounted ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  beforeUpdate() {
    console.log("%c======== beforeUpdate ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  updated() {
    console.log("%c======== updated ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  beforeDestroy() {
    console.log("%c======== beforeDestroy ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  destroyed() {
    console.log("%c======== destroyed ========", "color:red");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  }
};
</script>

上面有本个按钮,一个是改变当前组件的数据 message 变量的,一个是跳转到另一个页面(路由跳转),还有一个就是在当前组件中显示隐藏另一个组件的按钮。

我们第一次加载 Demo 组件的时候会从控制台中依次打印出如下信息:

Vue 生命周期钩子

图示一

也就是说一个组件开始加载到加载完,都会调用上面四个勾子函数。但是还有 beforeUpdate、updated、beforeDestroy、destroyed,没有调用到,那它们什么时候调用的呢?

接下来我们先看看 beforeUpdate、updated 这两个勾子函数。

当点击上面的更改数据按钮后,变量 message 的值发生了变化,此时 beforeUpdate、updated 就会被触发了。所以有时候我们可以通过这两个勾子函数来实现 watch 的功能。

beforeDestroy、destroyed 这两个勾子函数,点击上面的跳转按钮就可以触发这两个勾子函数了。但是除了路由跳转转外,v-if 也会触发这两个勾子函数。但 v-show 不会。还有一种情况也不会触发 beforeDestroy、destroyed 那就是 <keep-alive> </keep-alive>。

组件引入子组件,在 Demo 组件中引入 Son 组件,此时这两个组件的勾子函数的触发顺序如下图:

Vue 生命周期钩子

在 Demo 组件的 beforeMount 和 mounted 之间就已经去加载子组件了,并且等子组件加载完后才会去执行 mounted 勾子函数。那如果子组件里又引入了一个子组件呢?情况跟上面的一样,就像递归一样,一层套一层。子孙组件都挂载完后,顶级组件才会执行 mounted 勾子函数。

但是 v-if 的加载顺序及触发发的一些勾子函数有所不同,当进入 Demo 组件时,跟图示一没什么区别,当点击了显示隐藏的按钮后,截入子组件时,勾子函数触发顺序如下:

Vue 生命周期钩子

最后会执行一个 Demo 组件中的 updated 方法。

下面我们来细看一下当两个组件之间时间跳转时,关于这两个组件各自的勾子函数先后顺序都是怎么样的。

Vue 生命周期钩子

当进入 Demo 组件时,跟图示一没什么区别,当点击了显示隐藏的按钮后,跳转到另一组件时,勾子函数触发顺序就像上面那样,当另一个组件触发了 beforeMount 之后,就先销毁当前组件,然后再触发 Other 组件中的 mounted 勾子函数。

相关阅读

Vue 导航守卫(钩子函数)

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-lifecycle-diagram/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END