开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第6天 Vue生命周期
1、官方网址
2、八个钩子函数(生命周期)
2-1 beforeCreate
类型:function
介绍:在实例初始化之后,数据观测(data observer) 和 event/watcher事件配置之前被调用
2-2 created
类型:function
介绍:在实例创建完成后被立即调用。在这一步,实例已经完成以下配置:数据观测、property和方法的计算,watch/event事件回调。然而,挂在阶段还没开始,$el property目前尚不可用
2-3 beforeMounted
类型:function
介绍:在挂载开始之前被调用
注意:该钩子在服务器端渲染期间不被调用
2-4 mounted
类型:function
介绍:实例被挂载之后调用,这时el被新创建的vm。el 也在文档内。
注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick:
mounted:function(){ this.$nextTick(function(){ }) }
注意:该钩子在服务器端渲染期间不被调用
2-5 beforeUpdate
类型:function
介绍:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
注意:该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行
2-6 update
类型:function
介绍:当这个钩子被调用时,组件DOM已经更新,所以可以执行依赖此DOM的操作
注意:该钩子在服务器端渲染期间不被调用
2-7 beforeDestroy
类型:function
介绍:实例销毁之前调用,在这一步,实例依然可以用
注意:该钩子在服务器端渲染期间不被调用
2-8 destroyed
类型:function
介绍:实例销毁后调用,该钩子被调用后,对应的Vue实例的所有指令都被解绑,所有的监听器被移除,所有的子实例都被销毁
注意:该钩子在服务器端渲染期间不被调用