十分钟学会组件的生命周期

什么是组件的生命周期？

组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法

基本生命周期函数有下面几个阶段：

1. 创建阶段
2. 挂载阶段
3. 更新阶段
4. 卸载阶段

注意： 每个阶段都对应着 之前 和 之后 两个函数

创建阶段

  beforeCreate() {
    console.log("beforeCreate");
  },//创建之前

  created() {
    console.log("created");
  },//创建之后

挂载阶段

  beforeMount() {
    console.log("beforeMount");
  },//挂载之前

  mounted() {
    console.log("mounted");
  },//挂载之后

更新阶段

  beforeUpdate() {
    console.log("beforeUpdate");
  },//更新之前

  updated() {
    console.log("updated");
  },//更新之后

卸载阶段

  beforeDestroy() {
    console.log("beforeDestroy");
  },//卸载之前
  destroyed() {
    console.log("destroyed");
  },//卸载之后

我们现在把代码整理在一起，看一下页面反馈

<template>
  <div id="app">
    <button @click="n++">{{n}}</button>
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      n: 0,
    };
  },
  components: {
    HelloWorld
  },

  beforeCreate() {
    console.log("beforeCreate");
  },

  created() {
    console.log("created");
  },
  
  beforeMount() {
    console.log("beforeMount");
  },

  mounted() {
    console.log("mounted");
  },
  
  beforeUpdate() {
    console.log("beforeUpdate");
  },

  updated() {
    console.log("updated");
  },
  
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
};
</script>

我们可以看到，反馈的是
创建前-创建后-挂在前-挂在后

我们点击下按钮，让数据的到一个更新在看反馈

我们可以看出，在上方的基础上，多了一个更新前-更新后

我们在阶段上输出一些东西看一下区别

  beforeCreate() {
    console.log("beforeCreate");
    // console.log(this.$el) //undefined
    // console.log(this.$data) //undefined
  },

  created() {
    console.log("created");
    // console.log(this.$el) //undefined
    // console.log(this.$data) //获取到了
  },

在创建前或者创建后，我们去获取$el都是获取不到的
但是我们仔创建后就可以获取data数据了

  beforeMount() {
    console.log("beforeMount");
    // console.log(this.$el) //undefined
  },

  mounted() {
    console.log("mounted");
    // console.log(this.$el) //获取到了
  },

在挂载前获取$el是获取不到的，但是挂载后就可以获取到了
也就是说，我们想要操作dom的话需要在挂载后才可以

现在我们给app.vue加一个子组件，看一下页面反馈

<script>
export default {
  name: "HelloWorld",
  
  beforeCreate() {
    console.log("HelloWorld--beforeCreate");
  },

  created() {
    console.log("HelloWorld--created");
  },
  
  beforeMount() {
    console.log("HelloWorld--beforeMount");
  },

  mounted() {
    console.log("HelloWorld--mounted");
  },
  
  beforeUpdate() {
    console.log("HelloWorld--beforeUpdate");
  },

  updated() {
    console.log("HelloWorld--updated");
  },
  
  beforeDestroy() {
    console.log("HelloWorld--beforeDestroy");
  },
  destroyed() {
    console.log("HelloWorld--destroyed");
  }
};
</script>

从流程可以看出来，我们执行的顺序为
父组件创建前-父组件创建后-父组件挂载前-子组件创建前-子组件创建后-子组件挂载前-子组件挂载后-父组件挂载后

我们现在来看一下，组件被销毁后执行的顺序

<template>
  <div id="app">
    <button @click="n++">{{n}}</button>
    <button @click="show = !show">{{show}}</button>
    <HelloWorld v-if="show"></HelloWorld> 
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      n: 0,
      show: true
    };
  },
  components: {
    HelloWorld
  },
</script>

我们先再看一下点击之后浏览器的反馈

我们可以看出，在原本的基础上，多了一个
父组件更新前-子组件销毁前-子组件销毁后-父组件更新前

我们现在来看一下组件传参

父传子
<template>
  <div id="app">
    <button @click="n++">{{n}}</button>
    <button @click="show = !show">{{show}}</button>
    <HelloWorld v-if="show" :n="n"></HelloWorld> 
  </div>
</template>

自组件接收
<template>
  <div class="hello">
    <h1>{{n}}</h1>
  </div>
</template>
props: ["n"],

这个时候我们点击一下按钮，父组件会更新数据，子组件也会更新

我们可以看出父组件和子组件的数据都得到了更新，然后顺序还是和上述一样的

扩展

errorCaptured()
当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
其实就是一个错误提示信息，他会在你子组件发生错误是，阻拦错误，让错误不影响父级的正常运行

我们现在父级里边写上，用来收集错误信息

  errorCaptured: (err, vm, info) => {
    console.log("子组件出错了");
    console.log("1: " + err);
    console.log(vm);
    console.log("3: " + info);
  }

然后再子组件的创建后手动制造一个报错

  created() {
    ...
    throw new Error("出错了"); 
  },

我们看一下页面效果

我们可以看到，在父组件创建完就发现了子组件的报错。

然后我们再errorCaptured()加上一个return false 再看一下页面效果

我们可以看出，我们还是发现了子组件的报错，但是没有影响到父组件的运行！