Vue技术内幕 出去看看吧 挂载

Posted 2021-01-15 wenhandi

srcplatformsweb untimeindex.js

挂载

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

srccoreinstancelifecycle.js

updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
//...
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, ‘beforeUpdate‘)
      }
    }
  }, true /* isRenderWatcher */)

srccoreinstance
ender.js

Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
　　 //...
    // 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)

 

 

 

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {

const vm: Component = this

const prevEl = vm.$el

const prevVnode = vm._vnode

const prevActiveInstance = activeInstance

activeInstance = 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)

}

 

//srccorevdompatch.js

return function patch (oldVnode, vnode, hydrating, removeOnly) {

if (isUndef(vnode)) {

if (isDef(oldVnode)) invokeDestroyHook(oldVnode)

return

}

let isInitialPatch = false

const insertedVnodeQueue = []

if (isUndef(oldVnode)) {

// empty mount (likely as component), create new root element

isInitialPatch = true

createElm(vnode, insertedVnodeQueue)