Vue生命周期

83 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第6天 Vue生命周期

1、官方网址

cn.vuejs.org/v2/api/#bef…

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被调用时,vm.el替换了。如果根实例挂载到了一个文档内的元素上,当mounted被调用时,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实例的所有指令都被解绑,所有的监听器被移除,所有的子实例都被销毁

注意:该钩子在服务器端渲染期间不被调用