生命周期钩子

01-Vue生命周期钩子介绍

• vue生命周期钩子官方文档：

  • 官方文档图解介绍：生命周期图示https://v2.cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

  • 官方文档详细介绍：vue生命周期钩子介绍https://v2.cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

• ==vue生命周期钩子介绍 ： vue从创建到销毁过程中，会执行的一些回调函数==

  • 钩子 ： 一种回调函数

    • 例如

      • window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 }

  • 生命周期 ： vue实例从出生到扑街的过程

    • 出生：

      • 创建vue实例

      • 创建data数据

      • 创建el挂载点

      • 将data数据渲染到el挂载点

    • 扑街

      • vue实例被销毁

        • 这里销毁不是指vue实例变成了null，而是指解除data与el的关联

          • 说人话：修改了data，页面不会被渲染

• ==注意点==

  • 根据官网文档介绍 ： 每一个生命周期钩子中的this都是指向vue实例

  • 所以，生命周期钩子不能是箭头函数

vue的生命周期钩子分为四大阶段,8个方法

• 初始化

• 挂载

• 更新

• 销毁

执行顺序	钩子函数	执行时机
1	beforeCreate(){}	vue实例创建了，但是el和data还没有创建 （准备创建data） 底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
2	created() {}	data数据创建了，但是el挂载点还没有创建 (准备创建el) 底层：初始化data中的数据和methods中的方法
3	beforeMount() {}	el挂载点创建了，但是data数据还没有渲染（准备渲染中） 底层：创建el挂载点，并且生成虚拟DOM
4	mounted() {}	data数据 第一次 渲染完毕 (完成初始渲染) 底层：将虚拟dom渲染成真实DOM
5	beforeUpdate() {}	检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) 会执行多次
6	updated() {}	变化后的data数据 ，完成渲染到页面 （完成重新渲染）会执行多次
7	beforeDestroy() {}	vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染 底层 ： 解除 事件绑定、侦听器、组件
8	destroyed() {}	vue实例已经销毁

02-生命周期(初始化阶段)

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

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

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

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

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

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

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

没有. 调用$mount()方法

有, 继续检查template选项

 

 

• 1.beforeCreate钩子

  • 这个钩子几乎不怎么用

  • 初始化vue实例

  • 初始化事件(不是页面点击事件哈，就是vue本身自带的一些事件)

  • 初始化声明周期函数

• 2.created

  • 这个钩子非常重要

    • 经典应用 ： 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面

  • 初始化data中数据

  • 初始化methods里面的方法

03-生命周期(挂载阶段)

1.template选项检查

有 - 当前vue环境是脚手架， webpack就会编译.vue文件

没有- 当前vue环境是html环境

2.虚拟DOM挂载成真实DOM之前

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

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

5.真实DOM挂载完毕

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

• 3.beforeMount

  • 这个钩子不常用

  • 根据你的vue代码环境(html环境与脚手架环境),来编译模板html结构

  • 完成el挂载点加载（生成虚拟DOM）

• 4.mounted

  • 这个钩子很重要

    • 这个钩子是最早可以获取页面DOM元素的钩子

  • 虚拟DOM和渲染的数据一并挂到真实DOM上

 

04-生命周期(更新阶段)

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

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

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

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

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

这两个钩子会执行多次，只要data中数据变化了，就会执行

• 5.beforeUpdate

  • 这个钩子用的不是较多

  • 检测data数据变化， 修改虚拟DOM

• 6.updated

  • 这个钩子用的不是较多

  • 完成data渲染（将虚拟DOM渲染成真实DOM）

 

 

05-生命周期(销毁阶段)

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

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

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

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

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

• 7.beforeDestroy

  • 这个钩子有些场景会用到

    • 例如在这个钩子里面移除定时器clearInterval()

  • 这个钩子准备移除你的组件

  • 移除数据监视器，侦听器等

• 8.destroyed

  • 这个钩子几乎不怎么用，因为已经GG了，一切都晚了

 

 

 钩子

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1**）beforeCreate**

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2**）created**

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3**）beforeMount**

在挂载开始之前被调用：相关的 render 函数首次被调用。

4**）mounted**

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

5**）beforeUpdate**

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6**）updated**

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7**）activated**

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8**）deactivated**

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9**）beforeDestroy**

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10**）destroyed**

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11**）errorCaptured（2.5.0+ 新增）**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。