Vue 生命周期钩子

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，

生命周期钩子函数的简介

钩子函数名称	执行时间	作用
beforeCreate()	在组件创建之前执行	一般用来做 Ajax 请求
created()	在组件创建完毕的时候执行	进行同步的操作，比如给data选项中的数据赋值
beforeMount()	挂载元素之前执行	做一些检查数据或者检查状态的操作
mounted()	挂载元素完毕执行
beforeUpdate()	组件中的数据发生了更新之前执行	主要是检测模板是否发生了变化
updated()	组件中的数据发生了更新之后执行	主要是检测模板是否发生了变化
beforeDestroy()	在组件销毁之前执行	可以在这个地方 保存这个组件里的状态
destroyed()	组件销毁之后执行	检查操作
activated()	keep-alive 组件激活时调用
deactiveted()	keep-alive 组件停用时调用

生命周期钩子函数的写法

// 如下，组件中的生命周期钩子的写法
const Test = {
    template: `
    <div>
        <button>Button</button>
    </div>
    `,
    beforeCreate() {
        console.log('在实例初始化之后，数据观测(data observer) 和event/watcher事件配置之前被调用');
    },
    created() {
        console.log('在实例创建完成后被立即调用。在这一步，实例已经完成以下配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。');
    },
    beforeMount() {
        console.log('在挂载开始之前被调用');
    },
    mounted() {
        console.log('el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。');
    },
    beforeUpdate() {
        console.log('数据更新时调用，发生在虚拟DOM 打补丁之前。在这里适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。');
    },
    updated() {
        console.log('由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用这个钩子。');
    },
    beforeDestroy() {
        console.log('实例销毁之前调用，在这一步，实例仍然完全可用。');
    },
    destroyed() {
        console.log('Vue 实例销毁后调用。');
    },
    activated() {
        console.log('keep-alive 组件激活时调用。');
    },
    deactivated() {
        console.log('keep-alive 组件停用时调用。');
    },
}

注意1：什么时候，钩子可以访问到date中的数据呢？

data() {
    return {
        name: '宫鑫'
    }
},
beforeCreate() {
    console.log(this.name);
    // => undefined
},
created() {
    console.log(this.name);
    // => 宫鑫
},

因为 beforeCreate() ,是在数据观测 (data observer) 和 event/watcher 事件配置之前被调用。所以此阶段访问出来的数据是 undefined
而 created() 被调用的时候，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。所以此阶段能访问到数据

但是，这两个阶段，访问到的 this对象，打印出来是相同的，原因是，this是一个对象，既然是对象就是引用数据类型，当我们看到打印的数据的时候，其实已经到了 mounted() 阶段。所以我们看到的 this 对象，实际上是这个阶段的数据。

注意2：beforeUpdate() 和 updated()需要注意：
这两个钩子函数，并不是所有的 data 对象中的数据发生改变都会调用，而是模板中用到的数据发生改变才会调用；
因为数据的修改，导致虚拟DOM 的重新渲染和打补丁；
而 beforeUpdate() 是发生在虚拟 DOM 打补丁之前，updated() 是在虚拟DOM重新渲染和打补丁之后才会调用；

注意3：销毁阶段
销毁阶段一般是不会触发的，可以通过 v-if 来销毁一个组件，当我们的组件被 <keep-alive> 组件包裹的时候，就销毁不了了，可以触发 activated() 和 deavtivated() 函数；