vue学习笔记（五）——生命周期

一、Vue生命周期

1.1 Vue-生命周期

从 创建 到 销毁 的整个过程就是 – Vue实例的 - 生命周期

1.2 钩子函数

Vue 框架内置函数，随着组件的生命周期阶段，自动执行

作用：特定的时间点，执行特定的操作

场景:：组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

分类：4大阶段8个方法

如何知道Vue生命周期到达了什么阶段?

        使用钩子函数

钩子函数有哪些?

        初始化 / 挂载 / 更新 / 销毁

1.3 初始化

① new Vue() – Vue实例化(组件也是一个小的Vue实例)

② Init Events & Lifecycle – 初始化事件和生命周期函数

③ beforeCreate – 生命周期钩子函数被执行

④ Init injections&reactivity – Vue内部添加data和methods等

⑤ created – 生命周期钩子函数被执行, 实例创建

⑥ 接下来是编译模板阶段 –开始分析

⑦ Has el option? – 是否有el选项 – 检查要挂到哪里

        没有. 调用$mount()方法

        有, 继续检查template选项

Vue实例从创建到编译模板执行了哪些钩子函数?

        beforeCreate / created

created函数触发能获取data?

        能获取data, 不能获取真实DOM

1.4 挂载

① template选项检查

        有 - 编译template返回render渲染函数

        无 – 编译el选项对应标签作为template(要渲染的模板)

② 虚拟DOM挂载成真实DOM之前

③ beforeMount – 生命周期钩子函数被执行

④ Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

⑤ 真实DOM挂载完毕

⑥ mounted – 生命周期钩子函数被执行

Vue实例从创建到显示都经历了哪些钩子函数?

        beforeCreate / created / beforeMount / mounted

created函数里, 能获取真实DOM吗?

        不能获取真实DOM

在什么钩子函数里可以获取真实DOM?

        mounted

1.5 更新

① 当data里数据改变, 更新DOM之前

② beforeUpdate – 生命周期钩子函数被执行

③ Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

④ updated – 生命周期钩子函数被执行

⑤ 当有data数据改变 – 重复这个循环

什么时候执行updated钩子函数

        当数据发生变化并更新页面后

在哪可以获取更新后的DOM

        在updated钩子函数里

1.6 销毁

① 当$destroy()被调用 – 比如组件DOM被移除(例v-if)

② beforeDestroy – 生命周期钩子函数被执行

③ 拆卸数据监视器、子组件和事件侦听器

④ 实例销毁后, 最后触发一个钩子函数

⑤ destroyed – 生命周期钩子函数被执行

一般在beforeDestroy/destroyed里做什么?

        手动消除计时器/定时器/全局事件

​​​​​​​

<template>
  <div>
    <p>学习生命周期</p>
    <p>{{ msg }}</p>
    <p id="myP">这是我的p标签</p>
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{ item }}</li>
    </ul>
    <button @click="arr.push(1000)">点击添加一个值 1000</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello vue',
      arr: [1, 2, 5, 9],
      timer: null
    }
  },
  /** 一、初始化
   * new Vue() 以后，vue内部给实例对象添加了一些属性和方法，data和 methods 初始化之前
   * */
  beforeCreate () {
    console.log('beforeCreate执行了')
    console.log(this.msg) // undefined 访问不到 data 中的变量
  },
  /**
   * data 和 methods 初始化以后
   * 场景：网络请求，注册全局事件
   * */
  created () {
    console.log('created执行了')
    console.log(this.msg) // hello vue
    this.timer = setInterval(() => {
      console.log('定时器执行了。')
    }, 100)
  },
  /**
   * 二、挂载
   * 真实 DOM 挂载之前
   * 场景：预处理 data，不触发 updated 钩子函数
   * */
  beforeMount () {
    console.log('beforeMount执行了')
    console.log(document.querySelector('#myP')) // null 因为还未挂载真实dom，所以找不到dom元素
  },
  /**
   * 真实 dom 挂载以后
   * 场景：挂载后的真实 dom
   */
  mounted () {
    console.log('mounted执行了')
    console.log(document.querySelector('#myP')) // 可以找到真实p标签
  },
  /**
   * 三、更新
   * 前提：data 数据改变才执行
   * 跟新之前
  */
  beforeUpdate () {
    console.log('beforeUpdate执行了')
    console.log(document.querySelectorAll('ul li')[5]) // undefined，arr中数据改变之前执行，所以拿不到arr中的数据
  },
  /**
   * 更新之后
   * 场景：获取更新后的真实 dom 元素
  */
  updated () {
    console.log('updated执行了')
    console.log(document.querySelectorAll('ul li')[5])// li
  },
  /**
   * 四、销毁
   * 前提： v-if='false' 销毁 Vue 实例
   * 场景： 移除全局事件，移除当前组件，计时器，定时器，eventBus移除事件 $off 方法
   */
  beforeDestroy () {
    console.log('beforeDestroy执行了')
    clearInterval(this.timer)
  },
  destroyed () {
    console.log('destroyed执行了')
  }
}
</script>