vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期,本篇文章讲解了生命周期的每个阶段
- 话不多说,来看个图吧
- beforeCreate() 创建前
在实例初始化之后,数据观测(data obsever)和event/watcher事件配置之前被调用
beforeCreate(){ //在当前组件创建之前调用
console.log(this.msg) // 输出undefined,说明当前数据为空
},
- created() 创建完成后
使用该组件就会触发以上的钩子函数,created中可以操作数据、发送ajax,并且可以实现vue对页面的影响,应用主要是:发送Ajax请求
created(){
/*created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data obsever),属性和方法的运损,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见*/
console.log(this.msg);
},
- beforeMount() 挂载前
在挂载开始之前被调用,相关的render函数首次被调用。该钩子在服务器端渲染期间不被调用
beforeMount(){ // 装载数据到DOM之前会调用
console.log(document.getElementById('app'));
},
- mounted() 挂载完成后
el被新创建的vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内该钩子在服务器端渲染期间不被调用
beforeMount(){ // 装载数据到DOM之前会调用
console.log(document.getElementById('app'));
},
- beforeUpdate() 更新前
数据更新时调用,发生在虚拟DOM打补丁之前,这里适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。
beforeUpdate(){ // 更新之前,调用此钩子,应用:获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
- updated() 更新完成后
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之前会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作 然而在大多数情况下,应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或watcher取而代之,该钩子在服务器端渲染期间不被调用
updated(){ // 更新之后,调用此钩子,应用:获取最新的DOM
console.log(document.getElementById('app').innerHTML); // 获取所有元素
},
- beforeDestroy() 销毁前
Vue实例销毁之前调用,在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用
beforeDestroy(){
console.log('beforeDestroy');
},
- destroyed()销毁完成后
Vue实例销毁后调用,调用后,Vue实例指示的所有东西都会被解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
destroyed(){
console.log('destroyed');
},
vue 的生命周期,总得来说就是实例的创建和销毁这段时间的一个机制,也是vue框架的数据间的交互通信。感兴趣的小伙伴可以参考一下!