Vue的生命周期函数

生命周期钩子函数

beforeCreate

类型：Function
详细：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created

类型：Function
详细：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

类型：Function
详细：在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。

mounted

类型：Function
详细：el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。

beforeUpdate

类型：Function
详细：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated

类型：Function
详细：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

beforeDestroy

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

destroyed

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

activated

类型：Function
详细：keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。

deactivated

类型：Function
详细：keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。

生命周期图示

代码示例

new Vue({
el: '#app',
data: { },
computed: {},
watch: {},
methods: { },
beforeCreate () { console.log('在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。') },
created () { console.log('在实例创建完成后被立即调用。') },
beforeMount () { console.log('在挂载开始之前被调用。') },
mounted () { console.log('el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。')},
beforeUpdate () { console.log('数据更新时调用。') },
updated () { console.log('由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子') },
beforeDestroy () { console.log('实例销毁之前调用。在这一步，实例仍然完全可用。') },
destroyed () { console.log('Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。') }
})