vue2生命周期函数（笔记/自用）

---

vue2生命周期函数

---

一、生命周期是什么？

vue实例创建到销毁的一个过程。

二、有哪些？

一共有11个分别是：

beforeCreate（创建之前）：此时还没有data，也不能获取dom元素。可以修改页面的title，和页面加载的进度条。
created（创建之前）：从这里开始获取到了data的数据
beforeMount(挂载前)：子组件从这里开始创建，之后详细介绍
mounted（挂在后）：从这里开始，可以获取dom元素了
beforeupdata（更新前），updated（更新后）：视图更新触发。（注：不是数据更新时）
beforeDestroy （销毁前）， destroyed（销毁后）：在这里可以清除计时器（clearInterval()，clearTimeout()），移除数据监听（.removeEventLinster() //this.$bus.$off()）
配合keep-alive使用的有两个：
activated： 组件激活时调用
deactivated： 组件停用的时候调用
捕捉子组件错误时：
errorCaptured：有三个错误：
1. 错误的信息
2. 错误的组件
3. 错误的位置
可以返回值： 如果返回true,错误向外暴露，如果返回false 错误隐藏

三、 父组件子组件创建时的生命周期顺序：

1、父组件的beforeCreate↓

2、 父组件的created ↓

3、父组件的deforeMount ↓

4、子组件的beforeCreate ↓

5、 子组件的created↓

6、子组件的beforeMount ↓

7、 子组件的mounted ↓

8、 父组件的mounted

父组件：

<template>
  <div class="home">
    <child></child>
  </div>
</template>

<script>
import child from "../components/child.vue"
export default {
   
  components: {
    child },
  beforeCreate() {
   
    console.log('beforeCreate')
  },
  created() {
   
    console.log('created')
  },
  beforeMount() {
   
    console.log('beforeMount')
  },
  mounted() {
   
    console.log('mounted')
  },
  beforeDestroy() {
   
    console.log('home--beforeDestroy')
  },