vue项目的加载流程

387 阅读2分钟

组件的生命周期大体可以分为三个阶段:

初始化、运行中、销毁

    初始化阶段:beforeCreate created beforeMount (render) mounted
    运行中阶段:beforeUpdate updated
    销毁阶段:  beforeDestroy destroyed

初始化阶段:

1.一个组件或者实例的生命周期都是从new开始的

2.实例化之后,内部会做一些初始化的事件与生命周期相关的配置

3.beforeCreate这个钩子函数初始化的时候就会执行,但是数据是获取不到的,并且真实dom元素也是没有渲染出来的

4.created钩子函数内部可以访问到数据了,但是页面当中真实dom节点还是没有渲染出来,在这个钩子函数里面,可以进行相关初始化事件的绑定、发送ajax操作,当组件还没有挂载完毕之前,更改数据的话,是不会触发运行时钩子函数的执行!

5.接下来的过程,就是组件或者实例去查找各自的模板结构,然后将其编译成虚拟dom

6.beforeMount代表dom马上就要被渲染出来了,但是却还没有真正的渲染出来

这个钩子函数与created钩子函数用法基本一致,可以进行相关初始化事件的绑定、发送ajax操作
   生成好虚拟dom,然后内部通过render函数将对应的el进行替换,做一个初始化的虚拟dom渲染真实dom过程
    // render(){
    //     console.log("render....")
    // }        //7.mounted钩子函数是挂载阶段的最后一个钩子函数
    //数据挂载完毕,真实dom元素也已经渲染完成了
    //这个钩子函数内部可以做一些实例化相关的操作   拖拽

8.这个钩子函数初始化的不会执行,当组件挂载完毕的时候,并且当数据改变的时候,才会立马执行,这个钩子函数获取dom的内容是更新之前的内容

9.这个钩子函数获取dom的内容是更新之后的内容,生成新的虚拟dom,新的虚拟dom与之前的虚拟dom进行比对,差异之后,就会进行真实dom渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。

10.当组件销毁的时候,就会触发,这个钩子函数代表销毁之前,可以做一些善后操作,可以清除一些初始化事件、定时器相关的东西。

11.组件销毁的时候执行,watch/数据劫持等功能已经完全丧失