二、详解
放图:
Vue的生命周期分为三个阶段,8个钩子函数
研究方向:(1)data中的数据是否能够获取。(2)真实DOM是否能获取。
注意:钩子函数不要写成箭头函数,箭头函数可能会改变this指向
生命周期初始化阶段
1. beforecreate(实例被创建之前)
2.create(实例被创建完成之后)
3.beforeMount(组件挂载之前)
判断是否有el,若有el,再去判断是否有template。若有template,通过render函数将jsx渲染为VDOM,若没有el,可以使用$mount手动挂载。若没有template选项,使用outHTML手动写一个。
4.mounted(组件挂载结束后)
表示组件挂载结束,也就是生成的html已经插入页面结束了
总结:在项目中,
面试题:
1. vue中数据请求往哪里写?
* 数据请求初始化阶段都可以写
* 数据的修改写在后三个钩子
* 一般往mounted里面写
生命周期更新阶段(数据改变触发)
5.beforeUpdate (更新之前)
数据改变,重新生成vdom,然后通过diff算法得到patch补丁对象,自动完成任务
总结:不操作
6.updated(更新结束)
更新结束,那么肯定已经获取真实DOM,也就是说我们可以做真实dom操作了
总结:这个阶段使用updated就行
组件的销毁阶段(组件被销毁触发)
外部销毁:开关【 v-if 】
内部销毁:调用 this.$destroy()
作用:自动删除事件以及监听
注意: 内部销毁组件会被删除,但是组件的真实dom外壳会被遗留
* beforeDestroy
* destroyed
这两个钩子函数没有差别,任意用一个即可
原文:https://www.cnblogs.com/likecn/p/11742377.html