Vue 的生命周期

1.每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，它需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码。

2.Vue生命周期总共可以分为8个阶段：创建前后, 载入前后, 更新前后, 销毁前后，以及一些特殊场景的生命周期。vue3中新增了三个用于调试和服务端渲染场景。

生命周期v2	生命周期v3	描述
beforeCreate	beforeCreate	组件实例被创建之初
created	created	组件实例已经完全创建
beforeMount	beforeMount	组件挂载之前
mounted	mounted	组件挂载到实例上去之后
beforeUpdate	beforeUpdate	组件数据发生变化，更新之前
updated	updated	数据数据更新之后
beforeDestroy	beforeUnmount	组件实例销毁之前
destroyed	unmounted	组件实例销毁之后

生命周期v2	生命周期v3	描述
activated	activated	keep-alive 缓存的组件激活时
deactivated	deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	errorCaptured	捕获一个来自子孙组件的错误时被调用
-	renderTracked	调试钩子，响应式依赖被收集时调用
-	renderTriggered	调试钩子，响应式依赖被触发时调用
-	serverPrefetch	ssr only，组件实例在服务器上被渲染前调用

3.Vue生命周期流程图：

 

4.知识点：

beforeCreate：通常用于插件开发中执行一些初始化任务

created：组件初始化完毕，可以访问各种数据，获取接口数据等

mounted：dom已创建，可用于获取访问数据和dom元素；访问子组件等。

beforeUpdate：此时view层还未更新，可用于获取更新前各种状态

updated：完成view层的更新，更新后，所有状态已是最新

beforeunmount：实例被销毁前调用，可用于一些定时器或订阅的取消

unmounted：销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器

5.代码：

components/Life.vue - 创建一个文件

<template>

  <div>

    组件

  </div>

</template>

<script>

   

 export default {

  name: '',

  data() {

    return {

        msg:"组件"

    };

  },

  mounted() {

  },

  methods: {},

 };

</script>

<style scoped>

</style>

App.vue - 引入使用

<template>

  <div v-if="show" class="Dom1">

    <Life></Life>

  </div>

<br>

  <div v-for="item in arr" class="Dom2">

       {{item}}

  </div>

  <button @click="add()">添加游戏</button>

<br>

  <button @click="destory()">销毁组件</button>

</template>

<script>

  import Life from './components/Life.vue' //引入组件

 export default {

  name: '',

  data() {

    return {

      msg2:'我是app的生命周期',

      show:true,

      arr:["LOL","王者荣耀","原神"]

    };

  },

  // 创建之前 合理猜测data里面的数据并没有被执行

  beforeCreate(){

      console.log("beforeCreate执行了")

      console.log(this.msg2)

  },

  created(){

      console.log("created执行了")

      console.log(this.msg2)

  },

  //挂载之前

  //只有虚拟dom,没有真正的dom0

  beforeMount(){

    console.log("beforeMount执行了")

    console.log(document.querySelector(".Dom1"),"dom")

  },

  //挂载之后 vue帮我们创建好了真正的dom,我们终于可以发送请求并渲染画面

  mounted(){

    console.log(" mounted执行了")

    console.log(document.querySelector(".Dom1"),"dom")

  },

  beforeUnmount(){

    console.log(" beforeUnmount执行了")

    console.log(document.querySelector(".Dom1"),"dom")

  },

  unmount(){

    console.log(" unmount执行了")

    console.log(document.querySelector(".Dom1"),"dom")

  },

  beforeUpdate(){

    console.log("  beforeUpdate执行了")

    console.log(this.arr)

  },

  updated(){

    console.log(" updated执行了")

    console.log(this.arr)

    console.log(document.querySelector(".Dom2"),"dom")

  },

  components:{

     Life

  },

  methods: {

    destory(){

         this.show = false

    },

    add(){

      this.arr.push("CS")

    }

  },

 };

</script>

<style scoped>

</style>

vue生命周期总共分为几个阶段？（必会）

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**）beforeDestroy**

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

8**）destroyed**

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

第一次加载页面会触发哪几个钩子函数？（必会）

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数