1、beforeCreate()
在调用beforeCreate()函数前,vue主要做了vm实例一些属性的定义和createElement()方法的封装。此时函数的this指向vm,但还获取不到data中的数据、methods中的方法、watch中的事件,想要在这个阶段获取data中的数据的话,可以通过 $options获取父组件的data,或者通过 $nextTick或者setTimeout等异步方法,等待实例vm完成data的配置后获取。
beforeCreate() {
console.log(this); // this指向实例化对象
console.log(this._watcher); // null
console.log(this.num); // undefined
console.log(this.add); // undefined
console.log(this.$options); // 指向父组件
this.$nextTick(function(){
console.log(this.num); // 6
});
console.log(this.$createElement); // ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
console.log(this._vnode); // null
},
2、created()
此时,实例vm已经完成了data中的数据、methods中的方法、watch中的事件的挂载。$vnode属性已经存在,但虚拟节点的数据还未生成。所以DOM元素也没有生成, $el为undefined。一般可以将部分简单的数据请求放在这里执行,因为此时data已经可以使用,但如果将过多的数据请求都放在这里,可能会影响视图渲染,出现短暂白屏。
created() {
console.log(this); // this指向实例化对象
console.log(this._watchers); // [Watcher]
console.log(this.num); // 6
console.log(this.add); // ƒ add()
console.log(this.$options); // 指向父组件
console.log(this.$vnode); // 空的虚拟节点
console.log(this.$el); // undefined
console.log(this.$createElement); // ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
console.log(this._vnode); // null
}
3、beforeMount()
与created()中的状态基本相同。在created()和beforeMount()之间主要进行判断是否存在 $el,并将template编译成渲染函数。
beforeMount() {
console.log(this); // this指向实例化对象
console.log(this._watchers); // [Watcher]
console.log(this.num); // 6
console.log(this.add); // ƒ add()
console.log(this.$options); // 指向父组件
console.log(this.$vnode); // 空的虚拟节点
console.log(this.$el); // undefined
console.log(this.$createElement); // ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
console.log(this._vnode); // null
}
4、Mounted()
挂载完毕,此时可以获取到虚拟DOM和真实DOM,视图也已经渲染完毕。一般将数据请求放在这里执行,如果引用的一些第三方库或者插件需要操作DOM也可以在这里执行,因为DOM已经渲染完毕。
mounted() {
console.log(this);// this指向实例化对象
console.log(this._vnode);// VNode {tag: "div", data: undefined, children: Array(5), text: undefined, elm: div, …}
console.log(this.$el); // 得到DOM元素
}
5、beforeUpdate()
data中的数据已经更新完毕,但页面内容还未响应更改。针对视图层,只有视图层的数据改变才会触发。也就是说data中的数据如果没有在视图层使用那么如果改变不会触发,并且在beforeUpdate中再次改变data中的数据,不会再次触发beforeUpdate,因为此时视图层还未响应更新。 这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
beforeUpdate() {
}
6、update()
组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作,比如添加事件监听器。不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 updated 里使用 $nextTick
update() {
}
7、beforeDestroy()
销毁之前,实例上的事件、指令都可用,此时组件没有真正销毁。常用来销毁vm实例上的一些监听事件及定时函数,防止内存泄漏,提高性能。
beforeDestroy() {
}
8、destroyed()
beforeDestroy与destroyed之间,将children、watchers、components、evnet listener拆除。常用来销毁一些监听事件及定时函数,防止内存泄漏,提高性能。
destroyed() {
}