生命周期

初步认识生命周期的创建和销毁过程

生命周期是什么？生命周期中有哪些东西？

在我们的组件中，从创建到运行到销毁的阶段叫做生命周期。从我们数据被定义，到渲染到页面上，然后进行销毁的过程

vue组件运行的过程，也可以概括为生命周期

vue组件的初始化，表示生命周期的开始，vue组件的销毁，表示生命周期的结束；vue组件运行的过程可以叫做生命周期

生命周期函数（钩子函数）

生命周期函数，是由vue框架提供的内置函数；会伴随着组件的生命周期，自动按次序执行

生命周期函数的作用，允许程序员在特定的事件点，执行特定的事件

例如，组件创建完毕后，可以在created生命周期中发起ajax请求，从而初始化data

组件生命周期分类

创建阶段的生命周期：

beforeCreate：创建前，准备获取数据了，但是获取不到当前组件实例的数据和方法（但是部分的原型事件可以获取到），获取不到dom节点

created：创建后，可以获取到数据，但是获取不到dom节点

<template>
<div id="name">{{name}}</div>
</template>
<script>
export default {
  data() {
    return {
        name: `时不我待`
    }
  },
    //(1)第一个生命周期的钩子，我要开始挂载数据了，但是还没有获取数据，数据初始化之前调用
  beforeCreate() {
    console.log(`数据创建前`+this.name) //undefined
  },
  //(2)可以获取到数据，但是没有获取到dom元素，数据挂载完毕以后，组件methods可以访问到
  created() {
    console.log(`数据创建完成`+this.name)//时不我待
    console.log(`获取dom元素`+document.querySelector(`#name`))//null
  },

}
</script>

挂载阶段的生命周期

beforeMount：挂载前，和创建后基本上没有区别，声明要开始解析template

mounted：挂载后，整个组件挂载完毕，可以获取到真实dom，获取到真实数据，把数据渲染到页面上边

  //(3)挂载前，还没有挂载，拿不到dom节点，但是可以拿到数据
  beforeMount() {
    console.log(`挂载前`+this.name)//时不我待
  },
  //(4)挂载，可以拿到dom节点，可以拿到数据，把数据渲染到页面上
  mounted() {
    console.log(`挂载获取dom元素`+document.querySelector(`#name`)) //object HTMLDivElement
  },

更新页面阶段的生命周期

beforeupdata：当我们更新数据的时候，它会声明我要开始更新数据了，但是它还没有开始更新数据，是获取不到更之后的最新dom节点

updata：更新数据，他会把拿到最新的数据进行更新，可以拿到最新数据和dom节点

  //(5)更新之前，我要开始更新数据了，但是还没有进行更新，可以获取到最新的数据，但是获取不到最新的dom节点
  beforeUpdate() {
    console.log(`更新前数据`+this.name)//更新后的数据
    console.log(`更新前的dom节点`+document.querySelector(`#name`))//object HTMLDivElement
  },
  //(6)数据更新，更新数据，可以获取最新的数据和最新的dom节点
  updated() {
    console.log(`更新后的数据`+this.name)
    console.log(`更新后的数据`+document.querySelector(`#name`))
  }

销毁阶段的生命周期

beforeDestroy：准备销毁组件，销毁的组件。清除定时器相关的副作用操作，解绑一些事件

destroyde：销毁组件完成，什么都不存在了

  beforeDestroy() {
    //  清除定时器相关的副作用操作
    //  解绑一些事件
  },
  destroyed() {
    //  销毁完成，什么都不会存在了
  },

keep-alive（路由组件缓存的生命周期）

组件缓存是什么？

我们在组件出口的地方使用，keep-alive标签，对组件的出口进行包裹。如果添加组件缓存之后，组件是不会执行销毁钩子，所以组件时不会被销毁掉的，也就是被缓存起来了。

添加之后，我们只能首次触发该组件，进行缓存效果。当我们再次触发组件，使用的时keep-alive提供的生命周期钩子。

组件首次创建的时候会走created钩子，缓存以后，切换页面的时候，并没有重新调用接口。

组件缓存使用的场景是什么？

当我们使用组件的时候，会重新加载页面的数据，这样用户体验很不好，所以使用组件缓存，在用户切换页面的时候，不用重新加载页面。

当用户在一个页面中的输入框，输入数据以后，切换页面的时候，数据会丢失。但是使用keep-alive缓存的话，用户在切换页面以后，输入的数据并不会丢失，会保存下来。

 

 当我们想要再次触发组件，使用activated进行组件的重新激活，使用deactivated可以拿到离开组件的事件

activated(){log(`组件被激活了`)}
这里被缓存的组件，更新了，或者重新调用的时候，走这里

deactivated（）{log(`离开组件了`)}
这里是当我们离开组件的时候会这样

父子组件挂载渲染的顺序

走父组件的beforeCreate

走父组件的created

走父组件的beforeMount

走子组件的beforeCreate

走子组件的created

走子组件的beforeMount

走子组件的mounted

走父组件的mounted

走父组件的beforeupdata

走子组件的beforeupdata

走子组件的updata

走父组件的updata

父组件

<template>
<div id="name">
  {{name}}
  <button @click="name=`更新后的数据`">点击我修改新属性</button>
  <zhouqi></zhouqi>
</div>
</template>
<script>
import zhouqi from "@/components/zhouqi";
export default {
  components : {
    zhouqi
  },
  data() {
    return {
        name: `时不我待`
    }
  },
    //(1)第一个生命周期的钩子，我要开始挂载数据了，但是还没有获取数据，数据初始化之前调用
  beforeCreate() {
    console.log(`数据创建前`+this.name) //undefined
  },
  //(2)可以获取到数据，但是没有获取到dom元素，数据挂载完毕以后，组件methods可以访问到
  created() {
    console.log(`数据创建完成`+this.name)//时不我待
    console.log(`获取dom元素`+document.querySelector(`#name`))//null
  },
  //(3)挂载前，还没有挂载，拿不到dom节点，但是可以拿到数据
  beforeMount() {
    console.log(`挂载前`+this.name)//时不我待
  },
  //(4)挂载，可以拿到dom节点，可以拿到数据，把数据渲染到页面上
  mounted() {
    console.log(`挂载获取dom元素`+document.querySelector(`#name`)) //object HTMLDivElement
  },
  //(5)更新之前，我要开始更新数据了，但是还没有进行更新，可以获取到最新的数据，但是获取不到最新的dom节点
  beforeUpdate() {
    console.log(`更新前数据`+this.name)//更新后的数据
    console.log(`更新前的dom节点`+document.querySelector(`#name`))//object HTMLDivElement
  },
  //(6)数据更新，更新数据，可以获取最新的数据和最新的dom节点
  updated() {
    console.log(`更新后的数据`+this.name)
    console.log(`更新后的数据`+document.querySelector(`#name`))
  },
  //(7)准备销毁组件
  beforeDestroy() {
    //  清除定时器相关的副作用操作
    //  解绑一些事件
  },
  //(8)销毁组件
  destroyed() {
    //  销毁完成，什么都不会存在了
  },
}
</script>

子组件

<template>
  <div>
    {{name}}
  </div>
</template>

<script>
export default {
  name: "fuzi",
  beforeDestroy() {
    console.log(`子更新数据之前`)
  },
  data() {
    return {
      name: `学而时习之`
    }
  },
  created() {
    console.log(`子更新数据，但是获取不到data`+this.msg)
  },
  beforeMount() {
    console.log(`子更新dom之前，但是没有获取到dom`+this.msg)
  },
  mounted() {
    console.log(`子更新dom之后`)
  },
}
</script>