谁先执行?props还是data或是其他? vue组件初始化的执行顺序详解

时间:2022-10-20 07:53:56

初入vue的朋友可能会疑惑,组件初始化的时候,created,props,data到底谁先执行?

今天,我就带大家从源码的角度看看到底谁先执行?

我们知道,vue是个实例

谁先执行?props还是data或是其他? vue组件初始化的执行顺序详解

那我们就从new Vue()开始,看看到底做了什么,首先是_init方法,初始化,我们点进去继续看看

谁先执行?props还是data或是其他? vue组件初始化的执行顺序详解

可以看到首先是进行初始化生命周期,初始化事件中心,初始化渲染等操作,在created之前,这也就说明了为什么在created的时候无法进行dom操作

好了,这里主要的是initState函数,我们继续点进去

谁先执行?props还是data或是其他? vue组件初始化的执行顺序详解

好了 看到这个函数,大家应该一目了然了吧

总结:执行顺序beforeCreate  ->inject -> Props ->  Methods ->  Data -> Computed -> Watch ->provide-> created