patch 添加注释

Author: px6707

src/core/instance/index.ts

@@ -11,21 +11,26 @@ function Vue(options) {
   if (__DEV__ && !(this instanceof Vue)) {
     warn('Vue is a constructor and should be called with the `new` keyword')
   }
+  // 始化生命周期，添加父子组件关系，初始化事件、slot、注入、数据和provide
+  // 并向当前实例挂载_events、$slots、props、methods、data、computed\_provide属性、给_provide设置父组件的_provide作为原型
   this._init(options)
 }
 
 // 给Vue类 添加能力
 //@ts-expect-error Vue has function type
-// 添加初始化函数_init ,同时初始化生命周期，添加父子组件关系，初始化事件、slot、注入、数据和provide
-// 并向当前实例挂载_events、$slots、props、methods、data、computed\_provide属性、给_provide设置父组件的_provide作为原型
+// 添加初始化函数_init
 initMixin(Vue)
 //@ts-expect-error Vue has function type
+// Vue类上添加$props $data 的代理添加$watch方法
 stateMixin(Vue)
 //@ts-expect-error Vue has function type
+// 给Vue类上添加$on $off $once $emit方法
 eventsMixin(Vue)
 //@ts-expect-error Vue has function type
+// Vue类上挂载_update、$forceUpdate、$destroy方法
 lifecycleMixin(Vue)
 //@ts-expect-error Vue has function type
+// 挂载生成虚拟节点的方法_render和$nextTick,以及执行render函数需要的各种工具函数
 renderMixin(Vue)
 
 export default Vue as unknown as GlobalAPI

src/core/instance/lifecycle.ts

@@ -70,37 +70,44 @@ export function initLifecycle(vm: Component) {
   // 组件是否正在被销毁
   vm._isBeingDestroyed = false
 }
-
+// Vue类上挂载_update、$forceUpdate、$destroy方法
 export function lifecycleMixin(Vue: typeof Component) {
   Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
     const vm: Component = this
     const prevEl = vm.$el
     const prevVnode = vm._vnode
+  // 标识当前正在更新的组件实例，在patch、create-compoonent时使用
     const restoreActiveInstance = setActiveInstance(vm)
     vm._vnode = vnode
     // Vue.prototype.__patch__ is injected in entry points
     // based on the rendering backend used.
+    // 之前没有虚拟节点，说明是第一次渲染
     if (!prevVnode) {
       // initial render
+      // 生成真实DOM节点,将当前组件的挂载节点赋值给$el
       vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
     } else {
       // updates
       vm.$el = vm.__patch__(prevVnode, vnode)
     }
     restoreActiveInstance()
     // update __vue__ reference
+    // 更新DOM元素和Vue实例之间的引用
     if (prevEl) {
       prevEl.__vue__ = null
     }
     if (vm.$el) {
       vm.$el.__vue__ = vm
     }
     // if parent is an HOC, update its $el as well
+    // 在透明的高阶组件（高阶组件不渲染额外节点）的情况下，HOC没有额外的渲染内容，只是一个过渡的包装，为了保证HOC组件能够正确的访问实际DOM
     let wrapper: Component | undefined = vm
     while (
       wrapper &&
       wrapper.$vnode &&
       wrapper.$parent &&
+      // _vnode 是当前组件的虚拟节点 $vnode 是当前组件在父组件中的虚拟节点
+      //  通俗的说，_vode就是子组件的模版内容编译出的虚拟节点， $vode是父组件编译时的，子组件节点
       wrapper.$vnode === wrapper.$parent._vnode
     ) {
       wrapper.$parent.$el = wrapper.$el
@@ -119,33 +126,42 @@ export function lifecycleMixin(Vue: typeof Component) {
 
   Vue.prototype.$destroy = function () {
     const vm: Component = this
+    // 已经开始销毁
     if (vm._isBeingDestroyed) {
       return
     }
+    // 调用beforeDestroy钩子
     callHook(vm, 'beforeDestroy')
     vm._isBeingDestroyed = true
     // remove self from parent
     const parent = vm.$parent
     if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
+      // 从父组件中移除
       remove(parent.$children, vm)
     }
     // teardown scope. this includes both the render watcher and other
     // watchers created
     vm._scope.stop()
     // remove reference from data ob
     // frozen object may not have observer.
+//     vmCount 记录了有多少个组件实例在使用这个响应式数据
+// 当组件销毁时，需要减少计数，表示少了一个使用者
+// 这是为了内存管理，当 vmCount 为 0 时，表示没有组件在使用这个响应式数据了
     if (vm._data.__ob__) {
       vm._data.__ob__.vmCount--
     }
     // call the last hook...
     vm._isDestroyed = true
     // invoke destroy hooks on current rendered tree
+    // 新的vnode为null， 用来更新销毁后的视图
     vm.__patch__(vm._vnode, null)
+    // 调用destroyed钩子
     // fire destroyed hook
     callHook(vm, 'destroyed')
     // turn off all instance listeners.
     vm.$off()
     // remove __vue__ reference
+    // 当前节点和DOM、父节点的关系断开
     if (vm.$el) {
       vm.$el.__vue__ = null
     }

src/core/instance/render.ts

@@ -99,17 +99,19 @@ export function setCurrentRenderingInstance(vm: Component) {
 
 export function renderMixin(Vue: typeof Component) {
   // install runtime convenience helpers
+  // 编译生成的render函数中，所使用的各种工具函数挂载到Vue.prototype上
   installRenderHelpers(Vue.prototype)
-
+  // 挂载$nextTick函数
   Vue.prototype.$nextTick = function (fn: (...args: any[]) => any) {
     return nextTick(fn, this)
   }
-
+  // 挂载_render函数
   Vue.prototype._render = function (): VNode {
     const vm: Component = this
     const { render, _parentVnode } = vm.$options
-
+    // 如果有父节点且组件已挂载
     if (_parentVnode && vm._isMounted) {
+      // 标准化作用域插槽的格式 合并新旧作用域插槽。子组件更新时，要对父组件传递过来的插槽内容重新合并
       vm.$scopedSlots = normalizeScopedSlots(
         vm.$parent!,
         _parentVnode.data!.scopedSlots,
@@ -131,8 +133,10 @@ export function renderMixin(Vue: typeof Component) {
     try {
       setCurrentInstance(vm)
       currentRenderingInstance = vm
+      // 执行这个实例的render函数，生成虚拟节点
       vnode = render.call(vm._renderProxy, vm.$createElement)
     } catch (e: any) {
+      // render 过程中报错
       handleError(e, vm, `render`)
       // return error render result,
       // or previous vnode to prevent render error causing blank component
@@ -149,6 +153,7 @@ export function renderMixin(Vue: typeof Component) {
           vnode = vm._vnode
         }
       } else {
+        // 出错则使用旧的虚拟节点
         vnode = vm._vnode
       }
     } finally {
@@ -160,7 +165,9 @@ export function renderMixin(Vue: typeof Component) {
       vnode = vnode[0]
     }
     // return empty vnode in case the render function errored out
+    // 如果生成的虚拟节点不是VNode的实例，警告
     if (!(vnode instanceof VNode)) {
+      // 如果是多虚拟根节点，报错，使用空虚拟节点作为当前节点
       if (__DEV__ && isArray(vnode)) {
         warn(
           'Multiple root nodes returned from render function. Render function ' +

src/core/instance/state.ts

@@ -415,6 +415,7 @@ export function stateMixin(Vue: typeof Component) {
     return this._props
   }
   if (__DEV__) {
+    // data和props不能直接赋值
     dataDef.set = function () {
       warn(
         'Avoid replacing instance root $data. ' +

src/core/observer/index.ts

@@ -87,7 +87,7 @@ export class Observer {
           }
         }
       }
-      // 如果不是浅响应，需要对数组元素进行依赖收集
+      // 如果不是浅响应，需要对数组元素observe
       if (!shallow) {
         this.observeArray(value)
       }
@@ -124,6 +124,7 @@ export class Observer {
  * returns the new observer if successfully observed,
  * or the existing observer if the value already has one.
  */
+// 负责把对象整体变成响应式
 export function observe(
   value: any,
   shallow?: boolean,
@@ -150,6 +151,7 @@ export function observe(
 /**
  * Define a reactive property on an Object.
  */
+// 负责把一个对象的属性变成响应式
 export function defineReactive(
   obj: object,
   key: string,
@@ -273,12 +275,14 @@ export function set(
     return
   }
   const ob = (target as any).__ob__
+  // 如果原始对象是个数组
   if (isArray(target) && isValidArrayIndex(key)) {
     // 给原始数组设置长度
     target.length = Math.max(target.length, key)
     // 将key索引处的值替换成新值
     target.splice(key, 1, val)
     // when mocking for SSR, array methods are not hijacked
+    // 对新的数组响应式
     if (ob && !ob.shallow && ob.mock) {
       observe(val, false, true)
     }
@@ -289,7 +293,7 @@ export function set(
     target[key] = val
     return val
   }
-  // 如果target是Vue实例 或者 再被Observer劫持的情况下有vmCount，则不允许设置响应式属性 vm存在说明是根级别的data
+  // 如果target是Vue实例 或者 再被Observer劫持的情况下有vmCount，则不允许设置响应式属性 vmCount存在说明多个实例使用这个对象作为根级别的data
   // 性能考虑：
   // 根级响应式数据的变化会触发整个组件树的重新渲染
   // 运行时添加根级属性可能导致不必要的性能开销

src/core/observer/traverse.ts

@@ -42,6 +42,7 @@ function _traverse(val: any, seen: SimpleSet) {
   } else {
     keys = Object.keys(val)
     i = keys.length
+    // 关键是这一行，对value[keys[i]]再次深层遍历，相当于获取响应式对象的属性，触发更新
     while (i--) _traverse(val[keys[i]], seen)
   }
 }

src/core/util/options.ts

@@ -550,10 +550,13 @@ export function resolveAsset(
   }
   const assets = options[type]
   // check local registration variations first
+  // 直接匹配
   if (hasOwn(assets, id)) return assets[id]
   const camelizedId = camelize(id)
+  // 驼峰式匹配 (如 v-my-dir -> vMyDir)
   if (hasOwn(assets, camelizedId)) return assets[camelizedId]
   const PascalCaseId = capitalize(camelizedId)
+  // 首字母大写匹配 (如 vMyDir -> VMyDir)
   if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
   // fallback to prototype chain
   const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]

src/core/vdom/create-component.ts

@@ -44,6 +44,7 @@ const componentVNodeHooks = {
       const mountedNode: any = vnode // work around flow
       componentVNodeHooks.prepatch(mountedNode, mountedNode)
     } else {
+      // 创建的组件实例赋值给vnode.componentInstance
       const child = (vnode.componentInstance = createComponentInstanceForVnode(
         vnode,
         activeInstance
@@ -68,6 +69,7 @@ const componentVNodeHooks = {
     const { context, componentInstance } = vnode
     if (!componentInstance._isMounted) {
       componentInstance._isMounted = true
+      // 组件插入时，调用mounted钩子
       callHook(componentInstance, 'mounted')
     }
     if (vnode.data.keepAlive) {
@@ -88,6 +90,7 @@ const componentVNodeHooks = {
     const { componentInstance } = vnode
     if (!componentInstance._isDestroyed) {
       if (!vnode.data.keepAlive) {
+        // 组件销毁时，调用destroy钩子
         componentInstance.$destroy()
       } else {
         deactivateChildComponent(componentInstance, true /* direct */)
@@ -105,6 +108,7 @@ export function createComponent(
   children?: Array<VNode>,
   tag?: string
 ): VNode | Array<VNode> | void {
+  // 没有组件的构造函数，返回
   if (isUndef(Ctor)) {
     return
   }
@@ -119,6 +123,7 @@ export function createComponent(
   // if at this stage it's not a constructor or an async component factory,
   // reject.
   if (typeof Ctor !== 'function') {
+    // 构造函数不是函数，警告
     if (__DEV__) {
       warn(`Invalid Component definition: ${String(Ctor)}`, context)
     }
@@ -158,6 +163,7 @@ export function createComponent(
   // functional component
   // @ts-expect-error
   if (isTrue(Ctor.options.functional)) {
+    // 函数式组件使用createFunctionalComponent创建
     return createFunctionalComponent(
       Ctor as typeof Component,
       propsData,
@@ -188,11 +194,13 @@ export function createComponent(
   }
 
   // install component management hooks onto the placeholder node
+  // 装载组件的hook
   installComponentHooks(data)
 
   // return a placeholder vnode
   // @ts-expect-error
   const name = getComponentName(Ctor.options) || tag
+  // 创建虚拟节点
   const vnode = new VNode(
     // @ts-expect-error
     `vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
@@ -226,9 +234,10 @@ export function createComponentInstanceForVnode(
     options.render = inlineTemplate.render
     options.staticRenderFns = inlineTemplate.staticRenderFns
   }
+  // 使用vue的构造函数创建实例，传入options
   return new vnode.componentOptions.Ctor(options)
 }
-
+// 装载hooks
 function installComponentHooks(data: VNodeData) {
   const hooks = data.hook || (data.hook = {})
   for (let i = 0; i < hooksToMerge.length; i++) {

src/core/vdom/create-element.ts

@@ -61,15 +61,18 @@ export function _createElement(
     return createEmptyVNode()
   }
   // object syntax in v-bind
+  // 更新is指定的tag
   if (isDef(data) && isDef(data.is)) {
     tag = data.is
   }
   if (!tag) {
     // in case of component :is set to falsy value
+    // tag不存在，返回空节点
     return createEmptyVNode()
   }
   // warn against non-primitive key
   if (__DEV__ && isDef(data) && isDef(data.key) && !isPrimitive(data.key)) {
+    // 不能使用对象作为key
     warn(
       'Avoid using non-primitive value as key, ' +
         'use string/number value instead.',
@@ -90,6 +93,7 @@ export function _createElement(
   let vnode, ns
   if (typeof tag === 'string') {
     let Ctor
+    // 如果vnode有ns，svg等使用的命名空间
     ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
     if (config.isReservedTag(tag)) {
       // platform built-in elements
@@ -104,6 +108,7 @@ export function _createElement(
           context
         )
       }
+      // 如果是平台保留标签，创建对应的vnode
       vnode = new VNode(
         config.parsePlatformTagName(tag),
         data,
@@ -116,6 +121,7 @@ export function _createElement(
       (!data || !data.pre) &&
       isDef((Ctor = resolveAsset(context.$options, 'components', tag)))
     ) {
+      // 是组件则创建组件的vnode
       // component
       vnode = createComponent(Ctor, data, context, children, tag)
     } else {
@@ -125,6 +131,7 @@ export function _createElement(
       vnode = new VNode(tag, data, children, undefined, undefined, context)
     }
   } else {
+    // tag不是字符串，使用createComponent创建
     // direct component options / constructor
     vnode = createComponent(tag as any, data, context, children)
   }

src/core/vdom/helpers/merge-hook.ts

@@ -22,10 +22,12 @@ export function mergeVNodeHook(
 
   if (isUndef(oldHook)) {
     // no existing hook
+    // 使用统一的错误处理包装wrappedHook
     invoker = createFnInvoker([wrappedHook])
   } else {
     /* istanbul ignore if */
     if (isDef(oldHook.fns) && isTrue(oldHook.merged)) {
+      // 如果之前的hook已经是包装过的，就不用再包装了，只需要把wrappedHook添加进去
       // already a merged invoker
       invoker = oldHook
       invoker.fns.push(wrappedHook)
@@ -34,7 +36,7 @@ export function mergeVNodeHook(
       invoker = createFnInvoker([oldHook, wrappedHook])
     }
   }
-
+  // 设置合并过的标志
   invoker.merged = true
   def[hookKey] = invoker
 }