生命周期

    vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
    创建前/后：**

    • 在beforeCreate阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
    • 在created阶段,vue实例的数据对象data有了，$el还没有。

    载入前/后：

    • 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。
    • 在mounted阶段，vue实例挂载完成，data.message成功渲染。

    更新前/后：

    • 当data变化时，会触发beforeUpdate和updated方法。

    销毁前/后：

    • 在执行destoryed方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

    渲染过程

    加载渲染过程**

    • 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

    子组件更新过程

    • 父beforeUpdate->子beforeUpdate->子updated->父updated

    父组件更新过程

    • 父beforeUpdate->父updated

    销毁过程

    • 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

    new vue()过程

    • 实例化vue构造函数
    • 首先执行了init（）函数
    • 合并配置
    • 初始化生命周期
    • 初始化事件中心
    • 初始化渲染
    • 调用 beforeCreate 钩子函数
    • init injections and reactivity（这个阶段属性都已注入绑定，而且被 $watch 变成reactivity，但是 $el 还是没有生成，也就是DOM没有生成）
    • 初始化state状态（初始化了data、props、computed、watcher）
    • 然后再去调用created，created完成之后，它会去判断instance（实例）里面是否含有“el”option（选项），如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；如果有的话，直接执行下一步。紧接着会判断是否含有“template”这个选项，如果有的话，它会把template解析成一个render function ，这是一个template编译的过程，结果是解析成了render函数
    • render函数是发生在beforeMount和mounted之间的，这也从侧面说明了，在beforeMount的时候，$el还只是我们在HTML里面写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function的内容。
    • beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了。
    • 后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。

    image.png