Vue思考题_02简述vue的生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期的函数，这给了用户在不同阶段添加自己的代码的机会。

vue2中的生命周期函数

生命周期图示

1.beforeCreate

特点： 此时Vue实例化对象刚刚初始化还是一个空对象，仅仅是初始化了默认事件与生命周期函数；还没有创建data/methods等配置项和挂载点。此时还不能访问data和methods，等配置项也无法获取dom节点。

2.created

特点：此时配置项已经进行初始化但是还未创建挂载点，此时可以访问data和methods等配置项,但是拿不到vue渲染之后的Dom元素。

3.beforeMount

特点：beforeMount为数据初次渲染前的回调，此时读取了el(确定了vue的使用范围)，但是还没有将el挂在到dom元素上， 不能访问vue渲染后的dom元素。

4.mounted

特点：mounted为数据初次渲染之后的钩子，可以访问vue渲染之后的dom元素
应用：主要是进入页面之后的dom操作(主要是想在数据渲染到dom操作之后做处理在这个勾子中);

5.beforeUpdate

• 数据更改前的回调
• 执行时机：vue页面中使用的数据已修改,但是还没有完成相应数据渲染；

6.updated

• 数据更改后的回调

• 执行时机： vue页面中使用的相关值修改且页面已经完成相关渲染时就会执行这个勾子；

  ​ 比如说我在data中定义了一个num，但是在html结构(页面)中并没有使用这个num，此时修改了num之后并不会走updated这个勾子；

  ​ 若是在html中使用了num，当num做了修改之后，就会走updated这个勾子；

7.beforeDestroy

• vue实例销毁前的回调

• 特点

  • 什么都可以访问；
  • 准备销毁；

• 作用

  • 用于善后工作(eg：清除定时器)

8.destroyed

• vue实例销毁之后
• 特点
  • 中断了渲染(就是中断了html与js的联系)
  • 但是还可以访问data与methods；
• 应用：用于处理善后工作

9.举例

<template>
  <div style="margin-top:20px" id="box">
    {
   {
    value }}
  </div>
</template>

<script>
export default {
   
  data(){
   
    return{
   
      value:111
    }
  },
  beforeCreate(){
   
    console.log('-------beforeCreate-------')
    console.log('data数据', this.value) // 'data数据' undefined
    console.log('dom',document.getElementById('box')) // null
    console.log('el', this.$el)
  },
  created(){
   
    console.log('-------created-------')
    console.log('data数据', this.value)// 'data数据' 111
    console.log('dom',document.getElementById('box')