Vue 学习笔记—实例的生命周期

从 Vue 实例创建、运行、到销毁期间总是伴随着各种各样的事件，这些事件统称为生命周期。在生命周期的不同阶段 Vue 会调用不同的钩子函数，我们可以通过这些钩子函数在 Vue 生命周期的不同阶段进行操作。

# 生命周期图

下面是官方提供的生命周期示例

# 生命周期函数

通过生命周期图我们可以将钩子函数分为下面三类

初始化时期 依次调用 beforeCreate、 created、 beforeMount、 mounted

运行时期 依次调用 beforeUpdate、 updated

销毁时期 依次调用 beforeDestroy、 destroyed

# 使用钩子函数

这些函数会在 Vue 生命周期的不同阶段被调用，我们可以在特定的钩子函数中执行一些操作。使用方式如下所示

new Vue({
    el: '#app',
    data: {
        msg: 'hello Vue'
    },
    beforeCreate: function () {
        ...
    },
    created: function () {
        ...
    }
    ...
});

# 初始化时期生命周期函数

# beforeCreate

此时 Vue 实例刚刚在内存中创建， data 与 methods 属性还没初始化

# created

此时实例已经创建完毕， data 与 methods 属性也已经创建完毕，但还没有编译模板 (template)，如果需要执行 methods 中的方法或对 data 中的数据进行操作最早只能在该方法中执行，还可以在这里进行 Ajax 请求

# beforeMount

此时已经完成了模板的编译但还没有挂载到页面

# mounted

此时模板已经挂载到了页面中，DOM 已经渲染完毕，可以在这里对 DOM 进行操作，Vue 实例的创建阶段已经完成，接下来进入运行阶段

# 运行时期生命周期函数

# beforeUpdate

当状态发生改变 (如 data 中的数据发生变化时) 会执行该方法，此时 data 中的数据已经变为新值，但页面还未改变，因为此时还没有重新渲染 DOM 节点

# updated

此时界面已经渲染完毕， data 中的数据与页面显示保持一致

# 销毁时期生命周期函数

# beforeDestroy

Vue 实例销毁前会调用此方法，此时实例依然可以使用，可以在这里清除定时器或解除事件绑定

# destroyed

Vue 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。