Vue.js中组件的生命周期

首先组件的生命周期分为三个阶段:

• 初始化
• 运行中
• 销毁

初始化:

初始化下又分为两个阶段,每个阶段又有两个钩子函数

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

这两个钩子函数执行的是一样的功能,主要是善后工作,常用来清除一些计时器和方法以及第三方实例