首先组件的生命周期分为三个阶段:
- 初始化
- 运行中
- 销毁
初始化:
初始化下又分为两个阶段,每个阶段又有两个钩子函数
beforeCreate:
为组件的创建做准备工作,在这个钩子函数中,获取不到数据和DOM,所以并没有什么实际意义
created:
组件创建完成
这个钩子函数可以获取到数据,但是获取不到DOM
所以可以做数据请求,并提供一次默认的修改
beforeMount:
为组件的装载做准备工作,它看配置项中有没有el,如果template不存在,就手动装载,如果存在,就利用render函数进行渲染,这里的渲染是准备进行,还没人有进行
这个钩子哈数可以请求到数据,但是仍旧获取不到DOM
所以它可以做数据请求,提供一次默认的修改
mounted:
表示组件装载完成
可以获取到DOM,可以获取到数据,生成了真实DOM,DOM的操作和第三方实例化可以进行了
总结一下初始化阶段,一般来说数据请求越早越好,所以我们应当在created里做数据请求,而DOM操作和第三方实例化在mounted里进行
运行中:
运行中阶段分为2个钩子函数
beforeUpdata:数据更新前的准备工作
这个钩子函数里,只有数据改变了才能执行,
生成新的 VDOM , 然后通过diff算法进行两次VDOM 对比
updated:数据更新完毕
这个钩子函数里也是数据鞥更新了才能执行,更新了数据后通过render函数渲染真实DOM
运行中总结:如果我们既要数据更新,也要操作DOM,那么我么可以在updated钩子里进行
销毁:
销毁阶段又有两个钩子函数,beforedestroy和destroyed
这两个钩子函数执行的是一样的功能,主要是善后工作,常用来清除一些计时器和方法以及第三方实例