1、钩子函数的三个阶段
挂载阶段:beforeCreate、created、beforeMounted、mounted 更新阶段:beforeUpdate、updated 销毁阶段:beforeDestroy、destroyed
2、每个阶段的特性
-
beforeCreate :创建实例之前 -
created :实例创建完成(执行new Vue(options)),可访问data 、computed 、watch 、methods 上的方法和数据,可进行数据请求,未挂载到DOM结构上,不能获取el属性,如果要进行dom操作,那就要用nextTick函数。 -
beforeMount :在挂载开始之前被调用,beforeMount之前,会找到对应的template ,并编译成render 函数 -
mounted :实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,也可进行数据请求操作 -
beforeupdate :响应式数据更新时调用,发生在虚拟DOM打补丁之前,适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器 -
updated :虚拟DOM 重新渲染和打补丁之后调用,组件DOM已经更新 -
beforeDestroy :实例销毁之前调用,this仍能获取到实例,常用于销毁定时器 、解绑全局事件 、销毁插件对象 等操作 -
destroyed : 实例销毁之后
3、父子组件执行顺序
挂载:父created -> 子created -> 子mounted> 父mounted 更新:父beforeUpdate -> 子beforeUpdated -> 子updated -> 父亲updated 销毁:父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
|