第一

packages/vue-compat/src/createCompatVue.ts

@@ -21,24 +21,31 @@ import * as runtimeDom from '@vue/runtime-dom'
 
 function wrappedCreateApp(...args: any[]) {
   // @ts-ignore
+  // 兼容new Vue
   const app = createApp(...args)
+  // todo: 是不是看内部组件是否兼容？？
   if (compatUtils.isCompatEnabled(DeprecationTypes.RENDER_FUNCTION, null)) {
     // register built-in components so that they can be resolved via strings
     // in the legacy h() call. The __compat__ prefix is to ensure that v3 h()
     // doesn't get affected.
+    // 。注册内部组件
     app.component('__compat__transition', Transition)
     app.component('__compat__transition-group', TransitionGroup)
     app.component('__compat__keep-alive', KeepAlive)
     // built-in directives. No need for prefix since there's no render fn API
     // for resolving directives via string in v3.
+    // v-show 实现
     app._context.directives.show = vShow
+    // v-model 实现
     app._context.directives.model = vModelDynamic
   }
   return app
 }
 
 export function createCompatVue() {
+  // 旧得全局构造函数？？？？
   const Vue = compatUtils.createCompatVue(createApp, wrappedCreateApp)
+  // 把所有runtimeDom里面的属性方法放到Vue里面
   extend(Vue, runtimeDom)
   return Vue
 }

packages/vue-compat/src/index.ts

@@ -17,23 +17,31 @@ function compileToFunction(
   template: string | HTMLElement,
   options?: CompilerOptions
 ): RenderFunction {
+  // 不是string
   if (!isString(template)) {
+    // 判断节点类型  没有就不是节点
     if (template.nodeType) {
+      // 取内部的html代码
       template = template.innerHTML
     } else {
+      // 报错 返回一个空函数
       __DEV__ && warn(`invalid template option: `, template)
       return NOOP
     }
   }
 
   const key = template
+  // 获取值
   const cached = compileCache[key]
+  // 如果有值 直接返回缓存之前的
   if (cached) {
     return cached
   }
-
+  // 判断第一个字符串是不是#
   if (template[0] === '#') {
+    // 那么通过id 去选择元素
     const el = document.querySelector(template)
+    // 如果获取不到
     if (__DEV__ && !el) {
       warn(`Template element not found or is empty: ${template}`)
     }
@@ -41,13 +49,14 @@ function compileToFunction(
     // Reason: potential execution of JS expressions in in-DOM template.
     // The user must make sure the in-DOM template is trusted. If it's rendered
     // by the server, the template should not contain any user data.
+    // 获取的到 取内部的html
     template = el ? el.innerHTML : ``
   }
-
+  // 如果是 dev 不是test 不包含 options.whitespace 发出警告 压缩空白
   if (__DEV__ && !__TEST__ && (!options || !options.whitespace)) {
     warnDeprecation(DeprecationTypes.CONFIG_WHITESPACE, null)
   }
-
+  // template html 模板
   const { code } = compile(
     template,
     extend(
@@ -89,9 +98,11 @@ function compileToFunction(
   return (compileCache[key] = render)
 }
 
+// 为runtime-dom 注册编译器
 registerRuntimeCompiler(compileToFunction)
-
+// 创建vue 初始化属性 自带组件
 const Vue = createCompatVue()
+// 编译？函数
 Vue.compile = compileToFunction
 
 export default Vue