前端

复习--Vuejs源码阅读3

前言

前面两部分看完了vuejs类的实现、vuejs的初始化，现在看第三部分，也是vuejs的另一个重点，模版解析(ast、render)

$mount方法

vuejs使用虚拟dom的方式更新ui，虚拟dom最大的一个好处是可以适应不同的平台，只要改变渲染代码就可适配到其他平台。vuejs实现了weex和浏览器上的 $mount,这里只看浏览器上的实现。看生命周期，在init完成时已经触发了beforeCreate、created生命周期钩子。
mountComponent函数一开始就将el赋值给$el然后触发第三个生期周期beforeMount,这里有一个小细节，如果用户没有实现render函数，vuejs会用createEmptyVNode代替。

重点在 new Watcher， isRenderWatcher表示它是vm._watcher，这个watcher负责当data、props等发生变化的时候重新渲染组件,如果。其实现原理如下:

  1. new Watcher(vm, updateComponent, noop, before, true /* isRenderWatcher */),因为没有lazy:true所以会直接执行watcher.get也就是 updateComponent函数，此时Dep.target 是vm._watcher
  2. updateComponent执行到 render函数收集依赖，举个例子：
    当执行_vm.msg时，getter函数 if(Dep.target)成立，将_vm.msg添加到vm._watcher的依赖列表中，同时_vm.msg会将vm._watcher添加到自己的sub里
  3. 当_vm.msg更新，触发notify通知vm._watcher执行回调，即updateComponent重新渲染组件。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var render = function() {
      var _vm = this
      var _h = _vm.$createElement
      var _c = _vm._self._c || _h
      return _c(
        "div",
        { attrs: { id: "app" } },
        [
          _c("img", {
            attrs: { alt: "Vue logo", src: require("./assets/logo.png") }
          }),
          _c("HelloWorld", {
            ref: "hw",
            attrs: { msg: _vm.msg, "data-title": _vm.a }
          }),
          _c("span", [_vm._v(_vm._s(_vm.c))])
        ],
        1
      )
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

// devtools global hook
/* istanbul ignore next */

}
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

现在再来看 _update、_render函数。_render函数负责根据ast抽象语法树生成vnode；_update负责对新旧vnode进行对比，根据对比结果更新ui.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85


Vue.prototype._render = function (): VNode {
   const vm: Component = this
   const { render, _parentVnode } = vm.$options

   if (_parentVnode) {
     vm.$scopedSlots = normalizeScopedSlots(
       _parentVnode.data.scopedSlots,
       vm.$slots
     )
   }

   // set parent vnode. this allows render functions to have access
   // to the data on the placeholder node.
   vm.$vnode = _parentVnode
   // render self
   let vnode
   try {
     vnode = render.call(vm._renderProxy, vm.$createElement)
   } catch (e) {
     handleError(e, vm, `render`)
     // return error render result,
     // or previous vnode to prevent render error causing blank component
     /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
       try {
         vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
       } catch (e) {
         handleError(e, vm, `renderError`)
         vnode = vm._vnode
       }
     } else {
       vnode = vm._vnode
     }
   }
   // if the returned array contains only a single node, allow it
   if (Array.isArray(vnode) && vnode.length === 1) {
     vnode = vnode[0]
   }
   // return empty vnode in case the render function errored out
   if (!(vnode instanceof VNode)) {
     if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
       warn(
         'Multiple root nodes returned from render function. Render function ' +
         'should return a single root node.',
         vm
       )
     }
     vnode = createEmptyVNode()
   }
   // set parent
   vnode.parent = _parentVnode
   return vnode
 } 
 Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
   const vm: Component = this
   const prevEl = vm.$el
   const prevVnode = vm._vnode
   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
     vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
   } else {
     // updates
     vm.$el = vm.__patch__(prevVnode, vnode)
   }
   restoreActiveInstance()
   // update __vue__ reference
   if (prevEl) {
     prevEl.__vue__ = null
   }
   if (vm.$el) {
     vm.$el.__vue__ = vm
   }
   // if parent is an HOC, update its $el as well
   if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
     vm.$parent.$el = vm.$el
   }
   // updated hook is called by the scheduler to ensure that children are
   // updated in a parent's updated hook.
 }

这样一样，第一次更新就完成了。当data或props改变或者其他方式触发watcher.update()。在flushSchedulerQueue中会触发watcher.before方法触发 beforeUpdate 生命周期钩子。然后触发watcher.run方法执行vm._update.当vm._update方法执行完毕之后会触发actived、updated生命周期方法。这样子就完成了一次更新。