https://ustbhuangyi.github.io/vue-analysis/v2/data-driven/update.html#%E6%80%BB%E7%BB%93

  1. function Vue (options) {
  2.   //不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
  3.   //不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
  4.   //不用 return 临时对象，因为 new 会帮你做；
  5.   //不要给原型想名字了，因为 new 指定名字为 prototype。
  6.   //instanceof是一个判断右侧是否在左侧原型链上的过程,new做了newObj.__proto__ = constructor
  7.   if (process.env.NODE_ENV !== 'production' &&
  8.     !(this instanceof Vue)
  9.   ) {
  10.     warn('Vue is a constructor and should be called with the `new` keyword')
  11.   }
  12.   this._init(options)
  13. }
  1. //聚合同类定义
  2. var events = {
  3.   create: updateDOMListeners,
  4.   update: updateDOMListeners
  5. };
  6. //总模块定义聚合
  7. var platformModules = [
  8.   attrs,
  9.   klass,
  10.   events,
  11.   domProps,
  12.   style,
  13.   transition
  14. ];
  17. /*  */
  19. // the directive module should be applied last, after all
  20. // built-in modules have been applied.
  21. var modules = platformModules.concat(baseModules);
  22. //聚合需要的钩子
  23. function createPatchFunction (backend) {
  24.   var i, j;
  25.   var cbs = {};
  27.   var modules = backend.modules;
  28.   var nodeOps = backend.nodeOps;
  30.   for (i = 0; i < hooks.length; ++i) {
  31.     cbs[hooks[i]] = [];
  32.     for (j = 0; j < modules.length; ++j) {
  33.       if (isDef(modules[j][hooks[i]])) {
  34.         cbs[hooks[i]].push(modules[j][hooks[i]]);
  35.       }
  36.     }
  37.   }
  38.   ...
  39. }
  40.   //更新组件的属性(事件，属性等
  41.   prepatch: function prepatch (oldVnode, vnode) {
  42.     var options = vnode.componentOptions;
  43.     var child = vnode.componentInstance = oldVnode.componentInstance;
  44.     updateChildComponent(
  45.       child,
  46.       options.propsData, // updated props
  47.       options.listeners, // updated listeners
  48.       vnode, // new parent vnode
  49.       options.children // new children
  50.     );
  51.   },
  52.  // 更新vnode节点
  53.   function patchVnode (
  54.     oldVnode,
  55.     vnode,
  56.     insertedVnodeQueue,
  57.     ownerArray,
  58.     index,
  59.     removeOnly
  60.   ) {
  61.     if (oldVnode === vnode) {
  62.       return
  63.     }
  65.     if (isDef(vnode.elm) && isDef(ownerArray)) {
  66.       // clone reused vnode
  67.       vnode = ownerArray[index] = cloneVNode(vnode);
  68.     }
  70.     var elm = vnode.elm = oldVnode.elm;
  72.     if (isTrue(oldVnode.isAsyncPlaceholder)) {
  73.       if (isDef(vnode.asyncFactory.resolved)) {
  74.         hydrate(oldVnode.elm, vnode, insertedVnodeQueue);
  75.       } else {
  76.         vnode.isAsyncPlaceholder = true;
  77.       }
  78.       return
  79.     }
  81.     // reuse element for static trees.
  82.     // note we only do this if the vnode is cloned -
  83.     // if the new node is not cloned it means the render functions have been
  84.     // reset by the hot-reload-api and we need to do a proper re-render.
  85.     if (isTrue(vnode.isStatic) &&
  86.       isTrue(oldVnode.isStatic) &&
  87.       vnode.key === oldVnode.key &&
  88.       (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  89.     ) {
  90.       vnode.componentInstance = oldVnode.componentInstance;
  91.       return
  92.     }
  94.     var i;
  95.     var data = vnode.data;
  96.     // prepatch更新组件例如slot，options  prepatch 会执行 updateChildComponents
  97.     // hook和prepatch属性可以追溯到createComponent内对于属性的装配
  98.     if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
  99.       i(oldVnode, vnode);
  100.     }
  102.     var oldCh = oldVnode.children;
  103.     var ch = vnode.children;
  104. //      更新节点的属性  
  105. //      cbs.update包括
  106. //      updateAttrs  
  107. //      updateClass 
  108. //      updateDOMListeners
  109. //      updateDOMProps
  110. //      updateStyle
  111. //      update
  112. //      updateDirectives
  113.     if (isDef(data) && isPatchable(vnode)) {
  114.       for (i = 0; i < cbs.update.length; ++i) { cbs.update[i](oldVnode, vnode); }
  115.       if (isDef(i = data.hook) && isDef(i = i.update)) { i(oldVnode, vnode); }
  116.     }
  117.     if (isUndef(vnode.text)) {
  118.       if (isDef(oldCh) && isDef(ch)) {
  119.         if (oldCh !== ch) { updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly); }
  120.       } else if (isDef(ch)) {
  121.         if (process.env.NODE_ENV !== 'production') {
  122.           checkDuplicateKeys(ch);
  123.         }
  124.         if (isDef(oldVnode.text)) { nodeOps.setTextContent(elm, ''); }
  125.         addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
  126.       } else if (isDef(oldCh)) {
  127.         removeVnodes(oldCh, 0, oldCh.length - 1);
  128.       } else if (isDef(oldVnode.text)) {
  129.         nodeOps.setTextContent(elm, '');
  130.       }
  131.     } else if (oldVnode.text !== vnode.text) {
  132.       nodeOps.setTextContent(elm, vnode.text);
  133.     }
  134.     if (isDef(data)) {
  135.       if (isDef(i = data.hook) && isDef(i = i.postpatch)) { i(oldVnode, vnode); }
  136.     }
  137.   }

运行时

  1. // 定义根节点的complile规则
  2. var createCompiler = createCompilerCreator(function baseCompile (
  3.   template,
  4.   options
  5. ) {
  6.   var ast = parse(template.trim(), options);
  7.   if (options.optimize !== false) {
  8.     optimize(ast, options);
  9.   }
  10.   var code = generate(ast, options);
  11.   return {
  12.     ast: ast,
  13.     render: code.render,
  14.     staticRenderFns: code.staticRenderFns
  15.   }
  16. });
  17. //其中 generate 生成template首次对应的render代码，genElement具体的处理
  18. // render代码的功能  
  20. function generate (
  21.   ast,
  22.   options
  23. ) {
  24.   // CodegenState合并配置
  25.   var state = new CodegenState(options);
  26.   var code = ast ? genElement(ast, state) : '_c("div")';
  27.   return {
  28.     render: ("with(this){return " + code + "}"),
  29.     staticRenderFns: state.staticRenderFns
  30.   }
  31. }
  33. function genElement (el, state) {
  34.   if (el.parent) {
  35.     el.pre = el.pre || el.parent.pre;
  36.   }
  38.   if (el.staticRoot && !el.staticProcessed) {
  39.     return genStatic(el, state)
  40.   } else if (el.once && !el.onceProcessed) {
  41.     return genOnce(el, state)
  42.   } else if (el.for && !el.forProcessed) {
  43.     return genFor(el, state)
  44.   } else if (el.if && !el.ifProcessed) {
  45.     return genIf(el, state)
  46.   } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
  47.     return genChildren(el, state) || 'void 0'
  48.   } else if (el.tag === 'slot') {
  49.     return genSlot(el, state)
  50.   } else {
  51.     // component or element
  52.     var code;
  53.     if (el.component) {
  54.       code = genComponent(el.component, el, state);
  55.     } else {
  56.       var data;
  57.       if (!el.plain || (el.pre && state.maybeComponent(el))) {
  58.         data = genData$2(el, state);
  59.       }
  60.       var children = el.inlineTemplate ? null : genChildren(el, state, true);
  61.       code = "_c('" + (el.tag) + "'" + (data ? ("," + data) : '') + (children ? ("," + children) : '') + ")";
  62.     }
  63.     //根节点是template写法，此时code是_c("App") _c是处理template的createElement
  64.     // module transforms
  65.     for (var i = 0; i < state.transforms.length; i++) {
  66.       code = state.transforms[i](el, code);
  67.     }
  68.     return code
  69.   }
  70. }

generate调用路径 //根据ast生成render的方法块
image.png

  1. var ref$1 = createCompiler(baseOptions); 
  2. var compile = ref$1.compile;
  3. var compileToFunctions = ref$1.compileToFunctions;
  4. function createCompileToFunctionFn (compile) {
  5.   var cache = Object.create(null);
  6.   return function compileToFunctions (template,options,vm){
  7.     //compile根据代码块生成function
  8.     var compiled = compile(template, options);
  9.     res.render = createFunction(compiled.render, fnGenErrors);
  10.     return res；
  11.   }
  12. };
  13. //自动执行 auto   
  14. var createCompiler = createCompilerCreator(function baseCompile (){...});
  15. function createCompilerCreator(baseCompile){
  16.   return createCompiler(){
  17.     function compile(){
  18.         var compiled = baseCompile(template.trim(), finalOptions);
  19.         return compiled;
  20.     }
  21.     return {
  22.       compile: compile,
  23.       compileToFunctions: createCompileToFunctionFn(compile)
  24.     }
  25.   }
  26. };
  28. //上图手动触发顺序调用描述
  29.  1
  30.  var ref = compileToFunctions(template, {
  31.         outputSourceRange: process.env.NODE_ENV !== 'production',
  32.         shouldDecodeNewlines: shouldDecodeNewlines,
  33.         shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
  34.         delimiters: options.delimiters,
  35.         comments: options.comments
  36.       }, this);

update&createElement流程
image.png

Watcher在get触发依赖收集的过程中会 保证操作的dep实例收集的类属性 Dep.target是当前组件

  1. Watcher.prototype.get = function get () {
  2.   pushTarget(this);
  3.   //function pushTarget (target) {
  4.   //targetStack.push(target);
  5.   //Dep.target = target;
  6.   value = this.getter.call(vm, vm);//开始依赖收集，触发set，addDep
  7. }
  8. }

createElm(vue\src\core\vdom\patch.js\patch) vdom->dom 描述 update _patch的主要功能
1，是否是常规标签ns是指它标准的特色标准如svg等
2，递归创建子元素的createElm,从底层向上生成待dom树
3, 调用create钩子invokeCreateHooks。注:接着再调用 invokeCreateHooks 方法执行所有的 create 的钩子并把 vnode push 到 insertedVnodeQueue 中。

  1. function createElm (
  2.     vnode,
  3.     insertedVnodeQueue,
  4.     parentElm,
  5.     refElm,
  6.     nested,
  7.     ownerArray,
  8.     index
  9.   ) {
  10.     if (isDef(vnode.elm) && isDef(ownerArray)) {
  11.       // This vnode was used in a previous render!
  12.       // now it's used as a new node, overwriting its elm would cause
  13.       // potential patch errors down the road when it's used as an insertion
  14.       // reference node. Instead, we clone the node on-demand before creating
  15.       // associated DOM element for it.
  16.       vnode = ownerArray[index] = cloneVNode(vnode)
  17.     }
  19.     vnode.isRootInsert = !nested // for transition enter check
  20.     if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
  21.       return
  22.     }
  24.     const data = vnode.data
  25.     const children = vnode.children
  26.     const tag = vnode.tag
  27.     if (isDef(tag)) {
  28.       if (process.env.NODE_ENV !== 'production') {
  29.         if (data && data.pre) {
  30.           creatingElmInVPre++
  31.         }
  32.         if (isUnknownElement(vnode, creatingElmInVPre)) {
  33.           warn(
  34.             'Unknown custom element: <' + tag + '> - did you ' +
  35.             'register the component correctly? For recursive components, ' +
  36.             'make sure to provide the "name" option.',
  37.             vnode.context
  38.           )
  39.         }
  40.       }
  41.      // 是否是常规标签ns是指它标准的特色标准如svg等
  42.       vnode.elm = vnode.ns
  43.         ? nodeOps.createElementNS(vnode.ns, tag)
  44.         : nodeOps.createElement(tag, vnode)
  45.       setScope(vnode)
  47.       /* istanbul ignore if */
  48.       if (__WEEX__) {
  49.         // in Weex, the default insertion order is parent-first.
  50.         // List items can be optimized to use children-first insertion
  51.         // with append="tree".
  52.         const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
  53.         if (!appendAsTree) {
  54.           if (isDef(data)) {
  55.             invokeCreateHooks(vnode, insertedVnodeQueue)
  56.           }
  57.           insert(parentElm, vnode.elm, refElm)
  58.         }
  59.         createChildren(vnode, children, insertedVnodeQueue)
  60.         if (appendAsTree) {
  61.           if (isDef(data)) {
  62.             invokeCreateHooks(vnode, insertedVnodeQueue)
  63.           }
  64.           insert(parentElm, vnode.elm, refElm)
  65.         }
  66.       } else {
  67.         createChildren(vnode, children, insertedVnodeQueue)
  68.         if (isDef(data)) {
  69.           invokeCreateHooks(vnode, insertedVnodeQueue)
  70.         }
  71.         insert(parentElm, vnode.elm, refElm)
  72.       }
  74.       if (process.env.NODE_ENV !== 'production' && data && data.pre) {
  75.         creatingElmInVPre--
  76.       }
  77.     } else if (isTrue(vnode.isComment)) {
  78.       vnode.elm = nodeOps.createComment(vnode.text)
  79.       insert(parentElm, vnode.elm, refElm)
  80.     } else {
  81.       vnode.elm = nodeOps.createTextNode(vnode.text)
  82.       insert(parentElm, vnode.elm, refElm)
  83.     }
  84.   }

经典方法

normalizeArrayChildren 整理生成vdom

  1. function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  2.   const res = []
  3.   let i, c, lastIndex, last
  4.   for (i = 0; i < children.length; i++) {
  5.     c = children[i]
  6.     if (isUndef(c) || typeof c === 'boolean') continue
  7.     lastIndex = res.length - 1
  8.     last = res[lastIndex]
  9.     //  nested
  10.     // 如果是数组，递归调用normalizeArrayChildren
  11.     // nestedIndex, 多个重复时的唯一key
  12.     if (Array.isArray(c)) {
  13.       if (c.length > 0) {
  14.         c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
  15.         // merge adjacent text nodes   如果才生成的批量节点和当前数组最后一个元素都是文字，归并
  16.         if (isTextNode(c[0]) && isTextNode(last)) {
  17.           res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
  18.           c.shift()
  19.         }
  20.         //apply的第二个参数是数组，本句功能相当于push(...c)
  21.         res.push.apply(res, c)
  22.       }
  23.     } else if (isPrimitive(c)) {
  24.       if (isTextNode(last)) {
  25.         // merge adjacent text nodes
  26.         // this is necessary for SSR hydration because text nodes are
  27.         // essentially merged when rendered to HTML strings
  28.         res[lastIndex] = createTextVNode(last.text + c)
  29.       } else if (c !== '') {
  30.         // convert primitive to vnode
  31.         res.push(createTextVNode(c))
  32.       }
  33.     } else {
  34.       if (isTextNode(c) && isTextNode(last)) {
  35.         // merge adjacent text nodes
  36.         res[lastIndex] = createTextVNode(last.text + c.text)
  37.       } else {
  38.         // default key for nested array children (likely generated by v-for)
  39.         if (isTrue(children._isVList) &&
  40.           isDef(c.tag) &&
  41.           isUndef(c.key) &&
  42.           isDef(nestedIndex)) {
  43.           c.key = `__vlist${nestedIndex}_${i}__`
  44.         }
  45.         res.push(c)
  46.       }
  47.     }
  48.   }
  49.   return res
  50. }

observer/initState

vue初始化的构造函数_init内，会执行initState(对props、methods、data、computed和wathcer等属性做了初始化操作)，其中initData部分会执行 observe(data, true)->new Observer(value)

  1. function initData (vm: Component) {
  2.   let data = vm.$options.data
  3.   data = vm._data = typeof data === 'function'
  4.     ? getData(data, vm)
  5.     : data || {}
  6.   if (!isPlainObject(data)) {
  7.     data = {}
  8.     process.env.NODE_ENV !== 'production' && warn(
  9.       'data functions should return an object:\n' +
  10.       'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  11.       vm
  12.     )
  13.   }
  14.   // proxy data on instance
  15.   const keys = Object.keys(data)
  16.   const props = vm.$options.props
  17.   const methods = vm.$options.methods
  18.   let i = keys.length
  19.   while (i--) {
  20.     const key = keys[i]
  21.     if (process.env.NODE_ENV !== 'production') {
  22.       if (methods && hasOwn(methods, key)) {
  23.         warn(
  24.           `Method "${key}" has already been defined as a data property.`,
  25.           vm
  26.         )
  27.       }
  28.     }
  29.     if (props && hasOwn(props, key)) {
  30.       process.env.NODE_ENV !== 'production' && warn(
  31.         `The data property "${key}" is already declared as a prop. ` +
  32.         `Use prop default value instead.`,
  33.         vm
  34.       )
  35.     } else if (!isReserved(key)) {
  36.       proxy(vm, `_data`, key)
  37.     }
  38.   }
  39.   // observe data
  40.   observe(data, true /* asRootData */)
  41. }

Observer构造方法部分

  1. constructor (value: any) {
  2.     this.value = value
  3.     this.dep = new Dep()
  4.     this.vmCount = 0
  5.     def(value, '__ob__', this)  //把当前实例defineProperty到data的__ob__上
  6.     if (Array.isArray(value)) {
  7.       if (hasProto) {
  8.         protoAugment(value, arrayMethods)
  9.       } else {
  10.         copyAugment(value, arrayMethods, arrayKeys)
  11.       }
  12.       this.observeArray(value) //遍历数组再次调用 observe 方法
  13.     } else {
  14.       this.walk(value)
  15.     }
  16.   }
  17. //walk
  18. walk (obj: Object) {
  19.     const keys = Object.keys(obj)
  20.     for (let i = 0; i < keys.length; i++) {
  21.       defineReactive(obj, keys[i])  //开始正式的依赖收集
  22.     }
  23.   }

设置gettter/setter 依赖收集/派发更新

  1. export function defineReactive (
  2.   obj: Object,
  3.   key: string,
  4.   val: any,
  5.   customSetter?: ?Function,
  6.   shallow?: boolean
  7. ) {
  8.   const dep = new Dep()
  10.   const property = Object.getOwnPropertyDescriptor(obj, key)
  11.   if (property && property.configurable === false) {
  12.     return
  13.   }
  15.   // cater for pre-defined getter/setters
  16.   const getter = property && property.get
  17.   const setter = property && property.set
  18.   if ((!getter || setter) && arguments.length === 2) {
  19.     val = obj[key]
  20.   }
  21.   //childOb用于递归当前value(对象/数组)进行observe，当设置一个新值时，也能派发更新
  22.   let childOb = !shallow && observe(val)
  23.   Object.defineProperty(obj, key, {
  24.     enumerable: true,
  25.     configurable: true,
  26.     get: function reactiveGetter () {
  27.       const value = getter ? getter.call(obj) : val
  28.       if (Dep.target) {
  29.         dep.depend()
  30.         if (childOb) {
  31.           childOb.dep.depend()
  32.           if (Array.isArray(value)) {
  33.             dependArray(value)
  34.           }
  35.         }
  36.       }
  37.       return value
  38.     },
  39.     // ...
  40.   })
  41. }

watcher部分

  1. // expOrFn用于执行然后getter变量触发依赖收集。cb用于$watch,如expOrFn值变动，watch会调用run，其中会执行watch的回调方法cb。
  2. constructor (
  3.     vm: Component,
  4.     expOrFn: string | Function,
  5.     cb: Function,
  6.     options?: ?Object,
  7.     isRenderWatcher?: boolean
  8. )
  9. updateComponent = () => {
  10.   vm._update(vm._render(), hydrating)
  11. }
  12. new Watcher(vm, updateComponent, noop, {
  13.   before () {
  14.     if (vm._isMounted) {
  15.       callHook(vm, 'beforeUpdate')
  16.     }
  17.   }
  18. }, true /* isRenderWatcher */)
  20. //用newDepIds，depIds两个set来维护新旧依赖，便于在不同阶段调用/懒加载。新加入的依赖统一在
  21. //newDeps系列里，然后等合适的机会，diff并固化为实际的depIds系列，然后本身置空等待下次收集。
  22. //mountComponent的调用
  23. updateComponent = () => {
  24.   vm._update(vm._render(), hydrating)
  25. }
  26. new Watcher(vm, updateComponent, noop, {
  27.   before () {
  28.     if (vm._isMounted) {
  29.       callHook(vm, 'beforeUpdate')
  30.     }
  31.   }
  32. }, true /* isRenderWatcher */)
  33. constructor (                        //构造方法
  34.     vm: Component,
  35.     expOrFn: string | Function,
  36.     cb: Function,
  37.     options?: ?Object,
  38.     isRenderWatcher?: boolean
  39.   ) {
  40.     this.vm = vm
  41.     if (isRenderWatcher) {
  42.       vm._watcher = this
  43.     }
  44.     vm._watchers.push(this)
  45.     ...
  46.     // parse expression for getter
  47.     if (typeof expOrFn === 'function') {
  48.       this.getter = expOrFn           // this.getter = updateComponent
  49.     } else {
  50.       this.getter = parsePath(expOrFn)
  51.       if (!this.getter) {
  52.         this.getter = noop
  53.         process.env.NODE_ENV !== 'production' && warn(
  54.           `Failed watching path: "${expOrFn}" ` +
  55.           'Watcher only accepts simple dot-delimited paths. ' +
  56.           'For full control, use a function instead.',
  57.           vm
  58.         )
  59.       }
  60.     }
  61.     this.value = this.lazy
  62.       ? undefined
  63.       : this.get()
  64.   }
  65.   get(){
  66.     pushTarget(this)                    //当前Dep.target设置为this watcher，并缓存。
  67.     let value
  68.     const vm = this.vm
  69.     value = this.getter.call(vm, vm)    // vm._update(vm._render(), hydrating)
  70.     // render会生成VNode，过程中访问数据从而触发getter，此时dep.depend->Dep.target.addDep(this)
  71.     // 交给watcher执行(进行一些关于dep的判断)，最后交给dep.addSub，只负责收集行为。
  72.     if (this.deep) { 
  73.        traverse(value)                  //遍历触发依赖收集
  74.     }
  75.   }
  78. cleanupDeps () {
  79.     let i = this.deps.length
  80.     while (i--) {
  81.       const dep = this.deps[i]
  82.       if (!this.newDepIds.has(dep.id)) {
  83.         //如旧的依赖id，新的里面没有了，则remove掉
  84.         dep.removeSub(this)
  85.       }
  86.     }
  87.     let tmp = this.depIds
  88.     this.depIds = this.newDepIds
  89.     this.newDepIds = tmp
  90.     this.newDepIds.clear()
  91.     tmp = this.deps
  92.     this.deps = this.newDeps
  93.     this.newDeps = tmp
  94.     this.newDeps.length = 0
  95.   }
  96. //宏观理解下observer index是data数据reactive的逻辑，dep是一个data依赖的抽象或者说依赖的实体，维护了watchers，职责单一，如负责通知依赖的组件watcher update；watcher维护一个依赖的关系，然后负责具体组件的更新，取消订阅依赖等。

watch的更新

  1.  update () {
  2.     /* istanbul ignore else */
  3.     if (this.computed) {
  4.       // A computed property watcher has two modes: lazy and activated.
  5.       // It initializes as lazy by default, and only becomes activated when
  6.       // it is depended on by at least one subscriber, which is typically
  7.       // another computed property or a component's render function.
  8.       if (this.dep.subs.length === 0) {
  9.         // In lazy mode, we don't want to perform computations until necessary,
  10.         // so we simply mark the watcher as dirty. The actual computation is
  11.         // performed just-in-time in this.evaluate() when the computed property
  12.         // is accessed.
  13.         this.dirty = true
  14.       } else {
  15.         // In activated mode, we want to proactively perform the computation
  16.         // but only notify our subscribers when the value has indeed changed.
  17.         this.getAndInvoke(() => {
  18.           this.dep.notify()
  19.         })
  20.       }
  21.     } else if (this.sync) {
  22.       this.run()
  23.     } else {
  24.       queueWatcher(this)         //一般逻辑
  25.     }
  27.    export function queueWatcher (watcher: Watcher) {
  28.      const id = watcher.id
  29.      if (has[id] == null) {      //
  30.         has[id] = true
  31.      if (!flushing) {            //flush: 冲刷
  32.         queue.push(watcher)
  33.      } else {
  34.       // if already flushing, splice the watcher based on its id
  35.       // if already past its id, it will be run next immediately.
  36.       let i = queue.length - 1   
  37.       while (i > index && queue[i].id > watcher.id) {
  38.         i--
  39.       }
  40.        //id蕴含优先级信息，遍历插入  splice第二个参数是删除个数，0表示只新增 
  41.       queue.splice(i + 1, 0, watcher)
  42.     }
  43.     // queue the flush
  44.     if (!waiting) {
  45.       waiting = true
  46.       nextTick(flushSchedulerQueue)          //一般执行nextTick中的
  47.     }
  48.   }
  49. }

开始flush冲刷

  1. function flushSchedulerQueue () {
  2.   flushing = true
  3.   let watcher, id
  5.   // Sort queue before flush.
  6.   // This ensures that:
  7.   // 1. Components are updated from parent to child. (because parent is always
  8.   //    created before the child)
  9.   // 2. A component's user watchers are run before its render watcher (because
  10.   //    user watchers are created before the render watcher)
  11.   // 3. If a component is destroyed during a parent component's watcher run,
  12.   //    its watchers can be skipped.
  13.   queue.sort((a, b) => a.id - b.id)
  15.   // do not cache length because more watchers might be pushed
  16.   // as we run existing watchers
  17.   for (index = 0; index < queue.length; index++) {
  18.     watcher = queue[index]
  19.     if (watcher.before) {
  20.       watcher.before()
  21.     }
  22.     id = watcher.id
  23.     has[id] = null
  24.     watcher.run()                     //在此过程中可能会发生queueWatcher插入的逻辑，所以遍历flag动      态获取length
  25.     // in dev build, check and stop circular updates.
  26.     if (process.env.NODE_ENV !== 'production' && has[id] != null) {
  27.       circular[id] = (circular[id] || 0) + 1
  28.       if (circular[id] > MAX_UPDATE_COUNT) {
  29.         warn(
  30.           'You may have an infinite update loop ' + (
  31.             watcher.user
  32.               ? `in watcher with expression "${watcher.expression}"`
  33.               : `in a component render function.`
  34.           ),
  35.           watcher.vm
  36.         )
  37.         break
  38.       }
  39.     }
  40.   }
  41.   //run
  42.   run () {
  43.     if (this.active) {
  44.       const value = this.get()      //触发vm._update(vm._render(), hydrating)，重新渲染和收集依赖
  45.       if (
  46.         value !== this.value ||
  47.         // Deep watchers and watchers on Object/Arrays should fire even
  48.         // when the value is the same, because the value may
  49.         // have mutated.
  50.         isObject(value) ||
  51.         this.deep
  52.       ) {
  53.         // set new value
  54.         const oldValue = this.value
  55.         this.value = value
  56.         if (this.user) {
  57.           try {
  58.             this.cb.call(this.vm, value, oldValue)       // $watch第二个参数的cb
  59.           } catch (e) {
  60.             handleError(e, this.vm, `callback for watcher "${this.expression}"`)
  61.           }
  62.         } else {
  63.           this.cb.call(this.vm, value, oldValue)
  64.         }
  65.       }
  66.     }
  67.   }

set方法

  1. function set (target: Array<any> | Object, key: any, val: any): any {
  2.   if (process.env.NODE_ENV !== 'production' &&
  3.     (isUndef(target) || isPrimitive(target))
  4.   ) {
  5.     warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  6.   }
  7.   if (Array.isArray(target) && isValidArrayIndex(key)) {
  8.     target.length = Math.max(target.length, key)
  9.     target.splice(key, 1, val)
  10.     return val
  11.   }
  12.   if (key in target && !(key in Object.prototype)) {
  13.     target[key] = val
  14.     return val
  15.   }
  16.   const ob = (target: any).__ob__
  17.   if (target._isVue || (ob && ob.vmCount)) {
  18.     process.env.NODE_ENV !== 'production' && warn(
  19.       'Avoid adding reactive properties to a Vue instance or its root $data ' +
  20.       'at runtime - declare it upfront in the data option.'
  21.     )
  22.     return val
  23.   }
  24.   if (!ob) {
  25.     target[key] = val
  26.     return val
  27.   }
  28.   defineReactive(ob.value, key, val)     
  29.   //进入这里说明是对响应式对象，添加新属性;
  30.   //这里ob是observer实例，执行let childOb = !shallow && observe(val)，observe，如果已经添加过，直   //接返回ob，然后getter准备收集依赖,
  31.   ob.dep.notify()
  32.   //notify最终执行watch.run执行value = this.get()触发vm.update(vm.render()),render会重新收集依赖
  33.   //最后update渲染
  34.   return val
  35. }

nextTick

  1. // 上面依次判断环境支持的api，对timerFunc赋值，
  2. let timeFunc
  3. if (typeof Promise !== 'undefined' && isNative(Promise)) {
  4.   const p = Promise.resolve()
  5.   timerFunc = () => {
  6.     p.then(flushCallbacks)
  7.     if (isIOS) setTimeout(noop)
  8.   }
  9.   isUsingMicroTask = true      //当前的循环基于microTask还是macroTask
  10. }
  11. else{
  12. timerFunc = () => {
  13.     setTimeout(flushCallbacks, 0)
  14. }
  15. }
  16. export function nextTick (cb?: Function, ctx?: Object) {
  17.   let _resolve
  18.   //推入队列一个闭包的function
  19.   callbacks.push(() => {
  20.     if (cb) {
  21.       try {
  22.         cb.call(ctx)
  23.       } catch (e) {
  24.         handleError(e, ctx, 'nextTick')
  25.       }
  26.     } else if (_resolve) {
  27.       _resolve(ctx)
  28.     }
  29.   })
  30.   if (!pending) {
  31.     pending = true
  32.     timerFunc()
  33.   }
  34.   // $flow-disable-line
  35.   if (!cb && typeof Promise !== 'undefined') {
  36.     return new Promise(resolve => {
  37.       _resolve = resolve
  38.     })
  39.   }
  40. }
  41. //callback 执行某次flush
  42. function flushCallbacks () {
  43.   pending = false
  44.   const copies = callbacks.slice(0)
  45.   callbacks.length = 0
  46.   for (let i = 0; i < copies.length; i++) {
  47.     copies[i]()
  48.   }
  49. }

还有一段有趣的任务执行代码

  1. let counter = 1
  2. //观察dom各项属性的突变
  3.   const observer = new MutationObserver(flushCallbacks)
  4.   const textNode = document.createTextNode(String(counter))
  5.   observer.observe(textNode, {
  6.     characterData: true
  7.   })
  8. //触发方式是执行dom内部text的变化，然后执行observer的监听
  9.   timerFunc = () => {
  10.     counter = (counter + 1) % 2
  11.     textNode.data = String(counter)
  12.   }
  13.   isUsingMicroTask = true

validateProp

  1. function validateProp (
  2.   key: string,
  3.   propOptions: Object,
  4.   propsData: Object,
  5.   vm?: Component
  6. ): any {
  7.   const prop = propOptions[key]
  8.   const absent = !hasOwn(propsData, key)
  9.   let value = propsData[key]
  10.   // boolean casting
  11.   const booleanIndex = getTypeIndex(Boolean, prop.type)
  12.   if (booleanIndex > -1) {
  13.     if (absent && !hasOwn(prop, 'default')) {
  14.       value = false
  15.     } else if (value === '' || value === hyphenate(key)) {
  16.       // only cast empty string / same name to boolean if
  17.       // boolean has higher priority
  18.       //在type里如果boolen在string前，或者无string，则将视作
  19.       const stringIndex = getTypeIndex(String, prop.type)
  20.       if (stringIndex < 0 || booleanIndex < stringIndex) {
  21.         value = true
  22.       }
  23.     }
  24.   }
  25.   // check default value
  26.   if (value === undefined) {
  27.     value = getPropDefaultValue(vm, prop, key)
  28.     // since the default value is a fresh copy,
  29.     // make sure to observe it.
  30.     const prevShouldObserve = shouldObserve
  31.     toggleObserving(true)
  32.     observe(value)
  33.     toggleObserving(prevShouldObserve)
  34.   }
  35.   if (
  36.     process.env.NODE_ENV !== 'production' &&
  37.     // skip validation for weex recycle-list child component props
  38.     !(__WEEX__ && isObject(value) && ('@binding' in value))
  39.   ) {
  40.     assertProp(prop, key, value, vm, absent)
  41.   }
  42.   return value
  43. }