<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-生命周期</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello,vue'
},
beforeCreate() {
console.log('beforeCreate', this.$el, this.$data);
},
created() {
//最早能访问到data数据的钩子 但模板还没有更新
//在这个阶段 可以进行网络请求
console.log('created', this.$el, this.$data);
},
beforeMount() {
console.log('beforeMount', this.$el, this.$data);
},
mounted() {
console.log('mounted', this.$el, this.$data);
},
</script>
</body>
</html>
beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用,这个时候拿不到data的值。
created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见,即在这个阶段模板还没有发生任何变化,但可以拿到data数据。
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted
el
被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el
也在文档内。
beforeUpdate() {
//在这里可以拿到更新前的DOM模板数据
console.log('beforeUpdate', this.$el.innerHTML, this.$data);
},
//在这里可以拿到更新后的DOM模板数据
updated() {
console.log('updated', this.$el.innerHTML, this.$data);
}
beforeUpdate
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
activated
keep-alive 组件激活时调用。
deactivated
keep-alive 组件停用时调用
beforeDestro() {
console.log('beforeDestroyed', this.$el, this.$data)
},
destroyed() {
console.log('destroyed', this.$el, this.$data)
}
//销毁之后对数据进行更改,并不会起作用,这个时候已经完全解绑了。
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。