Vue3初始化流程解析

Vue3初始化流程

最近再读源码，又有了一些心得感悟，准备将源码的学习心得整理一遍，以便之后再次复习使用

整体初始化流程图

深入研究初始化

1. 研究setup初始化

方法：setupComponent()
注意的点：

• setup中参数从何而来，由是什么
  研究的方法是createSetupContext()
• 为何setup中没有beforeCreate created呢
  这里需要看setupComponent里面的 createCompinentInstance 和 setupComponent, 先执行了createCompinentInstance获取组件实例，在执行setupComponent的时候instance已经存在了，所以beforeCreate created又又什么存在的必要呢
• vue3中vue2的语法如何支持的呢，如果setup中的数据和data重复该怎么办呢
  需要研究finishComponentSetup, 里面会对vue2语法进行支持，如果存在冲突，里面有很多if else的判断，需要读者自信去看

2. vue3和vue2初始化方式的变化及原因

(原理层面放入更新，后面画完vue2初始化流程图后更新)

• 变化1: 函数创建实例
  vue2: new Vue()
  vuw3: createApp()
  原因：个人认为是这么做ts强类型支持的会更好

• 变化2:实例方法
  vue2 Vue.component
  vue3: app.component
  原因：之前vue2这么做会造成全局污染

• 变化3: 挂载
  $mount -> mount
  api简化，一致性

• 变化4: Fragment