第一

packages/compiler-core/src/compile.ts

@@ -65,6 +65,7 @@ export function baseCompile(
   const onError = options.onError || defaultOnError
   const isModuleMode = options.mode === 'module'
   /* istanbul ignore if */
+  // 只要不是 dev onError 就是空函数
   if (__BROWSER__) {
     if (options.prefixIdentifiers === true) {
       onError(createCompilerError(ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED))
@@ -81,7 +82,7 @@ export function baseCompile(
   if (options.scopeId && !isModuleMode) {
     onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
   }
-
+  // 给options 赋初始值 如果不是字符串 直接返回 template
   const ast = isString(template) ? baseParse(template, options) : template
   const [nodeTransforms, directiveTransforms] =
     getBaseTransformPreset(prefixIdentifiers)

packages/compiler-core/src/parse.ts

@@ -67,17 +67,17 @@ const decodeMap: Record<string, string> = {
 }
 
 export const defaultParserOptions: MergedParserOptions = {
-  delimiters: [`{{`, `}}`],
-  getNamespace: () => Namespaces.HTML,
-  getTextMode: () => TextModes.DATA,
-  isVoidTag: NO,
-  isPreTag: NO,
-  isCustomElement: NO,
+  delimiters: [`{{`, `}}`], // 模板分割付
+  getNamespace: () => Namespaces.HTML, // HTML
+  getTextMode: () => TextModes.DATA, //DATA
+  isVoidTag: NO, // 无效标签
+  isPreTag: NO, // 是不是pre标签
+  isCustomElement: NO, // 是不是自定义标签
   decodeEntities: (rawText: string): string =>
-    rawText.replace(decodeRE, (_, p1) => decodeMap[p1]),
+    rawText.replace(decodeRE, (_, p1) => decodeMap[p1]), // 讲实体字符转换成字符串
   onError: defaultOnError,
   onWarn: defaultOnWarn,
-  comments: __DEV__
+  comments: __DEV__ // ???
 }
 
 export const enum TextModes {
@@ -105,8 +105,11 @@ export function baseParse(
   content: string,
   options: ParserOptions = {}
 ): RootNode {
+  // 给options 覆初始值 没有的属性都赋值进去
   const context = createParserContext(content, options)
+  // 貌似获取的是固定的
   const start = getCursor(context)
+  // create root
   return createRoot(
     parseChildren(context, TextModes.DATA, []),
     getSelection(context, start)
@@ -117,15 +120,12 @@ function createParserContext(
   content: string,
   rawOptions: ParserOptions
 ): ParserContext {
-  const options = extend({}, defaultParserOptions)
-
+  const options = extend({}, defaultParserOptions) // 这一行将所有defaultParserOptions属性复制给options
+  // 如果对象属性没有 讲使用默认的 defaultParserOptions
   let key: keyof ParserOptions
   for (key in rawOptions) {
     // @ts-ignore
-    options[key] =
-      rawOptions[key] === undefined
-        ? defaultParserOptions[key]
-        : rawOptions[key]
+    options[key] = rawOptions[key] === undefined ? defaultParserOptions[key] : rawOptions[key] // 当rawOptions key值是undefined的时候 给defaultParserOptionsde的值 不是unidentified 给 rawOptions的值
   }
   return {
     options,
@@ -139,24 +139,27 @@ function createParserContext(
     onWarn: options.onWarn
   }
 }
-
+// 解析标签
+// ancestors 默认是空数组
 function parseChildren(
   context: ParserContext,
   mode: TextModes,
   ancestors: ElementNode[]
 ): TemplateChildNode[] {
+  // ancestors 获取最后一个元素 默认undefined
+  // mode DATA
   const parent = last(ancestors)
-  const ns = parent ? parent.ns : Namespaces.HTML
-  const nodes: TemplateChildNode[] = []
-
+  const ns = parent ? parent.ns : Namespaces.HTML // 如果有 就取ns 没有     HTML ？
+  const nodes: TemplateChildNode[] = [] // ??创建列表
+  // 判断是不是结束标签 
   while (!isEnd(context, mode, ancestors)) {
     __TEST__ && assert(context.source.length > 0)
-    const s = context.source
+    const s = context.source // html 代码
     let node: TemplateChildNode | TemplateChildNode[] | undefined = undefined
 
     if (mode === TextModes.DATA || mode === TextModes.RCDATA) {
       if (!context.inVPre && startsWith(s, context.options.delimiters[0])) {
-        // '{{'
+        // 判断是不是'{{' 开头
         node = parseInterpolation(context, mode)
       } else if (mode === TextModes.DATA && s[0] === '<') {
         // https://html.spec.whatwg.org/multipage/parsing.html#tag-open-state
@@ -964,11 +967,12 @@ function parseInterpolation(
   context: ParserContext,
   mode: TextModes
 ): InterpolationNode | undefined {
-  const [open, close] = context.options.delimiters
-  __TEST__ && assert(startsWith(context.source, open))
+  const [open, close] = context.options.delimiters // open {{ close }}
+  __TEST__ && assert(startsWith(context.source, open)) // 是否为test
 
-  const closeIndex = context.source.indexOf(close, open.length)
-  if (closeIndex === -1) {
+  const closeIndex = context.source.indexOf(close, open.length)// 获取结束位置
+  if (closeIndex === -1) { 
+    // 找不到结束
     emitError(context, ErrorCodes.X_MISSING_INTERPOLATION_END)
     return undefined
   }
@@ -1057,6 +1061,7 @@ function parseTextData(
 }
 
 function getCursor(context: ParserContext): Position {
+  console.log(context)
   const { column, line, offset } = context
   return { column, line, offset }
 }
@@ -1067,6 +1072,7 @@ function getSelection(
   end?: Position
 ): SourceLocation {
   end = end || getCursor(context)
+  console.log(start,end)
   return {
     start,
     end,
@@ -1132,7 +1138,7 @@ function isEnd(
   mode: TextModes,
   ancestors: ElementNode[]
 ): boolean {
-  const s = context.source
+  const s = context.source // 原始html
 
   switch (mode) {
     case TextModes.DATA: