vue生命周期总共分为几个阶段?(不能在细了)

      当面试官问你 vue生命周期总共分为几个阶段呀?此时如果你实在是记不住那几个阶段的话,

不要紧,教你一句高逼格的装逼回答,你只需要高傲的冷哼一声,然后告诉他这八个字即可 :

个阶段8个勾子   这个时候你一定不要慌,维持住你的表情,让面试官觉得你是大佬技术很6即可。

      不过这里我还是把这 四个阶段8个勾子详细的讲解一下吧

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

出生:

创建vue实例

创建data数据

创建el挂载点

将data数据渲染到el挂载点

扑街 :

vue实例被销毁

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

说人话就是:修改了data,页面不会被渲染

==注意点==

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

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

<template>

  <div>

    <p>我的名字是:{{ name }}</p>

    <button @click="doClick">点我改名字</button>

  </div>

</template>

<script>

export default {

  //数据

  data () {

    return {

      name: 'zhangsan'

    }
  },

  //事件

  methods: {

    doClick () {

      this.name = 'lisi'

    }
  },

  //生命周期钩子

  //1. vue实例创建了,但是el和data还没有创建 (准备创建data)

  beforeCreate () {

    console.log(this)

    console.log(1)
  },

  //2. data数据创建了,但是el挂载点还没有创建 (准备创建el)

  created () {

    console.log(this)

    console.log(2)
  },

  //3. el挂载点创建了,但是data数据还没有渲染(准备渲染中)

  beforeMount () {

    console.log(this)

    console.log(3)

  },

  //4. data数据 第一次 渲染完毕 (完成初始渲染)

  mounted () {

    console.log(this)

    console.log(4)
  },

  //5. 检测到data数据变化,但是还没有开始重新渲染 (data变了,准备重新渲染中)

  beforeUpdate () {

    console.log(this)

    console.log(5)
  },

  //6. 变化后的data数据 ,完成渲染到页面 (完成重新渲染)

  updated () {

    console.log(this)

    console.log(6)
  },

  //7. vue实例销毁即将销毁

  /* 什么时候会执行这个钩子?

    销毁vue实例 : app.$destory()   例如v-if指令会让组件DOM被移除

    这行代码不是移除vue,而是解除data与el的关联

    说人话: 调用了app.$destory()之后,修改data,页面不会被渲染
    */

  beforeDestroy () {

    console.log(this)

    console.log(7)
  },

  //8. vue实例已经销毁

  destroyed () {

    console.log(this)

    console.log(8)
  }
}

</script>

<style></style>

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

  • 初始化

  • 挂载

  • 更新

  • 销毁

1.2-初始化阶段

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里面的方法

1.3-挂载阶段

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上

1.4-更新阶段

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

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

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

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

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

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

5.beforeUpdate 钩子

这个钩子用的不是较多

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

6.updated 钩子

这个钩子用的不是较多

完成data渲染(将虚拟DOM渲染成真实DOM)

1.5-销毁阶段

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

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

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

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

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

7.beforeDestroy 钩子

这个钩子有些场景会用到

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

移除数据监视器,侦听器等

8.destroyed 钩子

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

第一次加载页面会触发哪几个钩子函数?

  • 四个钩子
  • beforeCreate
  • created
  • beforeMount
  • mounted 这几个钩子函数


版权声明:本文为zheshihuahua原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。