[update]更新注释

Author: Jouryjc

.gitignore

@@ -0,0 +1,2 @@
+.idea/
+vue/.idea/

vue/src/core/instance/state.js

@@ -37,9 +37,9 @@ const sharedPropertyDefinition = {
 
 /**
  * 代理函数，app._data.text -> app.text
- * @param {*} target 
- * @param {*} sourceKey 
- * @param {*} key 
+ * @param {*} target
+ * @param {*} sourceKey
+ * @param {*} key
  */
 
 // proxy(vm, `_props`, key)
@@ -70,6 +70,8 @@ export function initState (vm: Component) {
 }
 
 function initProps (vm: Component, propsOptions: Object) {
+
+  // 获取props的数据
   const propsData = vm.$options.propsData || {}
   const props = vm._props = {}
   // cache prop keys so that future props updates can iterate using Array
@@ -200,23 +202,7 @@ function initComputed (vm: Component, computed: Object) {
 
     if (!isSSR) {
       // create internal watcher for the computed property.
-      /**
-      * 熟悉的new Watcher，创建一个订阅者，为了之后收集依赖
-      * 将例子中的num、lastNum和计算属性comNum进行绑定
-      * 也就是说在一个deps中有两个dep，其中的subs分别是
-      * dep1.subs:[watcher(num),watcher(comNum)]
-      * dep2.subs:[watcher(lastNum),watcher(comNum)]
-      * dep3........
-      * 请看前面的例子，页面html中并没有渲染{{lastNum}}；按理说就不会执行lastNum的getter
-      * 从而就不会和计算属性进行关联绑定，如果更改lastNum就不会触发dep2的notify()发布
-      * 自然也就不会在页面看到comNum有所变化，但是运行后却不是这样，为什么呢
-      * 这就引出这个initComputed的下面方法了---依赖收集(watcher.prototype.depend)！
-      * 当时也是看了好久才知道这个depend方法的作用，后面再说
-      * 首先先来提个头，就是下面代码中watcher中这个getter
-      * 其实就是function comNum() {return this.num+"-computed-"+this.lastNum;}}
-      * 而这个getter什么时候执行呢，会在Watcher.prototype.evaluate()方法中执行
-      * 所以watcher中的evaluate()与depend()两个方法都与initComputed相关
-      */
+      // computed watcher
       watchers[key] = new Watcher(
         vm,
         getter || noop,

vue/src/core/observer/watcher.js

@@ -171,6 +171,7 @@ export default class Watcher {
       // It initializes as lazy by default, and only becomes activated when
       // it is depended on by at least one subscriber, which is typically
       // another computed property or a component's render function.
+      // 没有人订阅这个computed watcher的变化，只需要把dirty设置为true，下次有人访问时求值
       if (this.dep.subs.length === 0) {
         // In lazy mode, we don't want to perform computations until necessary,
         // so we simply mark the watcher as dirty. The actual computation is
@@ -181,6 +182,8 @@ export default class Watcher {
         // In activated mode, we want to proactively perform the computation
         // but only notify our subscribers when the value has indeed changed.
         this.getAndInvoke(() => {
+
+          // 派发更新
           this.dep.notify()
         })
       }
@@ -233,17 +236,24 @@ export default class Watcher {
    */
   evaluate () {
     if (this.dirty) {
+      // 这里的get就是computed上的getter函数
       this.value = this.get()
       this.dirty = false
     }
+
+    // 返回getter的值
     return this.value
   }
 
   /**
    * Depend on this watcher. Only for computed property watchers.
    */
   depend () {
+    // Dep.target代表的是渲染watcher
+    // 在计算计算属性时，触发其他响应式的getter，此时Dep.target代表的是computed watcher
     if (this.dep && Dep.target) {
+
+      // 渲染watcher订阅computed watcher的变化
       this.dep.depend()
     }
   }

vue/src/core/util/next-tick.js

@@ -12,6 +12,8 @@ function flushCallbacks () {
   pending = false
   const copies = callbacks.slice(0)
   callbacks.length = 0
+
+  // 循环调用callbacks函数
   for (let i = 0; i < copies.length; i++) {
     copies[i]()
   }
@@ -78,6 +80,8 @@ if (typeof Promise !== 'undefined' && isNative(Promise)) {
  * Wrap a function so that if any code inside triggers state change,
  * the changes are queued using a (macro) task instead of a microtask.
  */
+// 强制使用宏任务执行
+// 比如对于一些 DOM 交互事件，如 v-on 绑定的事件回调函数的处理，会强制走 macro task
 export function withMacroTask (fn: Function): Function {
   return fn._withTask || (fn._withTask = function () {
     useMacroTask = true
@@ -89,6 +93,8 @@ export function withMacroTask (fn: Function): Function {
 
 export function nextTick (cb?: Function, ctx?: Object) {
   let _resolve
+
+  // 把传入的函数压入callbacks数组
   callbacks.push(() => {
     if (cb) {
       try {
@@ -109,6 +115,7 @@ export function nextTick (cb?: Function, ctx?: Object) {
     }
   }
   // $flow-disable-line
+  // 当nextTick不传函数时，提供一个promise化的调用
   if (!cb && typeof Promise !== 'undefined') {
     return new Promise(resolve => {
       _resolve = resolve

vue/src/core/vdom/create-element.js

@@ -37,6 +37,9 @@ export function createElement (
   normalizationType: any,
   alwaysNormalize: boolean
 ): VNode | Array<VNode> {
+
+  // 满足data是一个数组或者基础类型时，说明传的是children参数，需要后移一位
+  // 参数个数的统一性处理
   if (Array.isArray(data) || isPrimitive(data)) {
     normalizationType = children
     children = data
@@ -64,11 +67,11 @@ export function _createElement (
   normalizationType?: number
 ): VNode | Array<VNode> {
 
-  /*
-    如果传递data参数且data的__ob__已经定义（代表已经被observed，上面绑定了Oberver对象），
-    https://cn.vuejs.org/v2/guide/render-function.html#约束
-    那么创建一个空节点
-  */
+  /**
+    * 如果传递data参数且data的__ob__已经定义（代表已经被observed，上面绑定了Oberver对象），
+    * https://cn.vuejs.org/v2/guide/render-function.html#约束
+    * 那么创建一个空节点
+    */
   if (isDef(data) && isDef((data: any).__ob__)) {
     process.env.NODE_ENV !== 'production' && warn(
       `Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n` +
@@ -79,6 +82,7 @@ export function _createElement (
   }
 
   // object syntax in v-bind
+  // 用在<component is="...">
   if (isDef(data) && isDef(data.is)) {
     tag = data.is
   }
@@ -109,6 +113,8 @@ export function _createElement (
     data.scopedSlots = { default: children[0] }
     children.length = 0
   }
+
+
   if (normalizationType === ALWAYS_NORMALIZE) {
     children = normalizeChildren(children)
   } else if (normalizationType === SIMPLE_NORMALIZE) {

vue/src/core/vdom/patch.js

@@ -32,7 +32,16 @@ export const emptyNode = new VNode('', {}, [])
 
 const hooks = ['create', 'activate', 'update', 'remove', 'destroy']
 
+/**
+ * 判断VNode是否一致
+ * @param a
+ * @param b
+ * @returns {boolean|*}
+ */
 function sameVnode (a, b) {
+  // key相等
+  // 标签名、注释、data、input type
+  // 异步节点
   return (
     a.key === b.key && (
       (
@@ -285,7 +294,7 @@ export function createPatchFunction (backend) {
    * dom插入函数
    * @param {*} parent - 父节点
    * @param {*} elm - 子节点
-   * @param {*} ref 
+   * @param {*} ref
    */
   function insert (parent, elm, ref) {
     if (isDef(parent)) {
@@ -721,6 +730,7 @@ export function createPatchFunction (backend) {
       createElm(vnode, insertedVnodeQueue)
     } else {
       const isRealElement = isDef(oldVnode.nodeType)
+
       if (!isRealElement && sameVnode(oldVnode, vnode)) {
         // patch existing root node
         patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
@@ -749,11 +759,14 @@ export function createPatchFunction (backend) {
           }
           // either not server-rendered, or hydration failed.
           // create an empty node and replace it
+          // 把真实 DOM 转成VNode
           oldVnode = emptyNodeAt(oldVnode)
         }
 
         // replacing existing element
+        // 挂载节点
         const oldElm = oldVnode.elm
+        // 挂载节点的父节点，例子就是body
         const parentElm = nodeOps.parentNode(oldElm)
 
         // create new node

vue/src/platforms/web/runtime/patch.js

@@ -10,4 +10,8 @@ import platformModules from 'web/runtime/modules/index'
 const modules = platformModules.concat(baseModules)
 
 // 柯里化技巧
+/**
+ * @param {Object} - nodeOps 封装了一系列 DOM 操作的方法
+ * @param {Object} - modules 定义了一些模块的钩子函数的实现
+ */
 export const patch: Function = createPatchFunction({ nodeOps, modules })