Vue实例挂载的过程中发生了什么，结合生命周期

这是我参与「第四届青训营 」笔记创作活动的第8天

Vue定义了很多初始化方法，在不同的生命周期中分别进行不同的调用

1. 在调用beforeCreate钩子之前，数据初始化并未完成，此时data, props这些属性无法访问到

2. 到了created的时候，数据初始化已经完成（初始化的顺序依次是props，methods，data），能访问data，props这些属性，但vm.$el并未创建（$el是虚拟DOM的根节点），还未完成dom的挂载，无法访问dom元素

3. 当$el创建后，会通过调用vm.$mount(vm.$options.el)将虚拟dom的根节点进行挂载，挂载之前会将template进行解析：

   • 将template转为ast描述符形式的js对象
   • 生成render函数和staticRenderFns （该函数是vue3的优化，若内容过多会将静态内容抽出来减少重复渲染部分)
   • 等待reder和staticRednerFns函数被调用后生成虚拟VNode节点，该节点包含创建DOM节点所需信息，render的作用主要是生成vnode，staticRenderFns生成static node
   • 最后执行_update功能，主要是调用patch将vnode转换为真实DOM，并更新到页面中

4. 在还没更新到页面时，虚拟DOM仅存在于内存中，beforeMount→Mounted期间，vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

5. mounted阶段已经完成对页面DOM的替换，若要对页面的DOM进行操作，最早在mounted中，此时vue实例已经初始化完毕，脱离创建阶段，进入运行阶段

6. 组件运行阶段的生命周期只有两个（beforeUpdated和updated），当执行beforeUpdate时，页面中显示的数据未更新，但此时data的数据是最新的；

7. beforeUpdated->updated阶段会根据最新的的数据在内存中重新渲染一份最新的DOM树，然后再把更新的虚拟dom重新渲染到View视图层中；

8. updated执行时，页面和data数据已经保持同步，都是最新的；

相关问题：数据请求在created和mounted的区别

created和mounted都能拿到实例对象的属性和方法，但created是在dom节点生成之前执行，mounted是在页面dom渲染完毕之后立刻执行，因此放在mounted中的请求可能因为dom结构已经生成导致页面闪动，若页面加载前即created时完成请求，则不会出现该情况，所以对页面内容的改动最好放在created生命周期当中。