vue生命周期讲解

1.生命周期，简而言之就是一个事务从出生到消失的过程。例如，一个人从出生到去世。

在这里我们是指从创建vue对象到销毁vue对象的过程

2.钩子函数

（1）钩子函数是Vue框架中内置的一些函数，随着Vue的生命周期阶段，自动执行

（2）作用：特定的时间，执行特定的操作

3.vue生命周期之初始化阶段

new Vue()： Vue实例化对象(组件也是一个的vue实例化对象)
Init Events & Lifecycle：初始化事件和生命周期函数
beforeCreate：生命周期函数被执行此时不能访问data和menthods等中的东西
Init injections&reactivity：vue内部添加data和methods等
created：生命周期钩子函数被执行，实例创建此时能访问data和menthods等中的东西
接下来开始编译模板：开始分析
Has el option? ：是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项

4.vue生命周期之挂载

template选项检查:
有：编译template返回render渲染函数
无：编译el选项对应标签作为template(要渲染的模板）vue工程项目不支持
虚拟DOM挂载成真实DOM之前:
beforeMount ：生命周期钩子函数被执行
Create： 把虚拟DOM和渲染的数据一并挂到真实DOM上
挂载完毕，mounted：生命周期钩子函数被执行

5.vue之更新

• 当data里数据改变, 更新DOM之前，beforeUpdate – 生命周期钩子函数被执行此时获取不到更新的真实dom
• Virtual DOM：虚拟DOM重新渲染, 打补丁到真实DOM
• updated – 生命周期钩子函数被执行
• 当有data数据改变 – 重复这个循环

6.vue之销毁

1. 当$destroy()被调用：比如组件DOM被移除(例v-if)
2. beforeDestroy：生命周期钩子函数被执行
3. 拆卸数据监视器、子组件和事件侦听器
4. 实例销毁后, 最后触发一个钩子函数
5. destroyed： 生命周期钩子函数被执行

例：

<template>
<!--watch:数据发生变化，才会做事情-->
<!--  computed：数据发生变化，然后return一个结果-->
<!--  methods:用户触发事件，调用方法-->
  {{count}}
  <button @click="increment">+</button>
</template>

<script>

  export default {
    name: 'App',
    data() {
      return { count: 1}
    },
    created() {// `this` 指向 vm 实例
      console.log('组件被创建了')
    },
    mounted(){
      console.log('组件被挂载了')
    },
    updated(){
      console.log('组件被修改了')
    },
    unmounted() {
      console.log('组件被卸载')
    },
    methods:{
      increment(){
        this.count++
      }
    }


  }
</script>