Vue生命周期钩子函数

生命周期钩子函数，类比Spring里的bean的生命周期

在官网中找到这个Vue 实例 — Vue.js

 

在main.js中都会new Vue 这个实例

1、beforeCreate这个钩子函数，函数执行的时候，组件里的实例并没有被创建，这个函数里面并不知道data是什么

2、created 这个时候，实例创建了，data可以获取，监听数据了，但是页面看不到

3、el:"#app"  这个在main.js中，用的是mount('#app')，也可以这么写，el.“#app”看vue实例是否有这个，是否有挂载的一个容器。如果没有就看有没有mount

然后看是否有tempate这个标签

4、beforeMount ，准备要挂载，但是页面还是空白的，render函数第一次被调用了

5、mounted页面挂在了，就可以看到页面了

6、beforeUpdate 当数据被修改了，就要执行beforeUpdate，虚拟DOM重新渲染重新绑定，更新数据之前

7、updated数据更新完成了，

8、beforeDestroy， 当执行beforeDestroy钩子函数时，Vue实例就已经从运行阶段进入销毁的阶段，此时，组件中的所有的data、methods、以及过滤器指令等，都处于可用状态，此时还未真正执行销毁过程，Vue实例销毁执行的钩子函数

9、destroyed 当执行destroyed函数时，组件已经被完全销毁，此时组件中所有data、methods、以及过滤器、指令都不能用了。实例完成被销毁了，生命周期就结束。

然后使用代码来验证，在Header.vue里添加这几个钩子函数。通过alert打印，看执行的一个顺序，当点击修改的时候触发beforeUpdate、updated

<template>
  <div @click="changeTitle" class="Header">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    changeTitle() {
      //注册一个事件，参数1：事件名称  参数2....: 值，如果有更多的参数，继续往后写，
      //注册这个事件后，就要有一个地方触发这个事件
      this.$emit("titleChange", "我是emit通过到app.vue中修改了title值");
    },
  },
  beforeCreate() {
    alert("这个实例还没有被创建，所以你无法知道data，也不能用watch监听");
  },
  created() {
    alert(
      "这个时候实例已经创建了，可以得到data，调用watch，但是页面还是空白的"
    );
  },
  beforeMount() {
    alert("页面挂在前，此时页面还是空白的，这时render函数首次被调用");
  },
  mounted() {
    alert("页面挂在了，这时候可以看到页面的内容，也可以访问到dom");
  },
  beforeUpdate() {
    alert(
      "数据更新之前，也就是虚拟DOM打补丁之前，这个时候访问到DOM还有原有的DOM"
    );
  },
  updated() {
    alert("数据已经更新完毕");
  },
  beforeDestroy() {
    alert("页面离开之前被调用，清除定时器，或者三方的一些DOM结构");
  },
  destroyed() {
    alert("实例已经完全被销毁");
  },
};
</script>

<style scoped>
.Header {
  background: lightgreen;
  padding: 10px;
}
h1 {
  color: #222;
  text-align: center;
}
</style>

1、beforeCreate

2、created

 

 3、beforeMount

4、mounted

 

5、beforeUpdate

 

6、updated