新手写的Vue源码学习记录(渲染过程)

时间  2019-11-07
标签 新手 写的 vue 源码 学习 记录 渲染 过程 繁體版
原文   原文链接

无规矩不成方圆html

在技术领域上更是如此, 好比: 类名头字母大写, promiseA+ 规范, DOM 标准, es 标准, 都是规矩.vue

框架亦是如此, 好比Vue 就是尤大的一套规矩.node

若是要打破规矩, 第一步要作的就是要了解规矩.web

2.6版本express

Vue 执行过程(new Vue({})以前)

<details>
<summary>
Vue 构造函数
</summary>api

// path: src/core/instance/index.js
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

</details>数组

各类Mixin 都干了什么?

其实他们都往 Vue 实例的原型链上添加了诸多的方法promise

initsrc/core/instance/init.js

Vue.prototype._init = functoin(options){...}

statesrc/core/instance/state.js

Vue.prototype.$data = {...}

Vue.prototype.$props = {...}

Vue.prototype.$set = function () {...}

Vue.prototype.$delete = function () {...}

Vue.prototype.$watch = functoin(expOrFn, cb, options){...}

eventssrc/core/instance/events.js

Vue.prototype.$on = functoin(event, fn){...}

Vue.prototype.$once = functoin(event, fn){...}

Vue.prototype.$off = functoin(event:Array<string>, fn){...}

Vue.prototype.$emit = functoin(event){...}

lifecyclesrc/core/instance/lifecycle.js

Vue.prototype._update = functoin(vnode, hydrating){...}

Vue.prototype.$forceUpdate = function(){...}

Vue.prototype.$destory = function(){...}

rendersrc/core/instance/render.js

Vue.prototype.$nexttick = function(fn){...}

Vue.prototype._render = function(){...}
缓存

其实在还有一个 initGlobalAPI(vm) 会初始化 .use(), .extend(), .mixin(), 这些在分析过程当中遇到再去了解app

如今来看一个实例(new Vue({}) 以后)

new Vue({
    el: '#app',
    data: {
        name: {
            firstName: 'lee',
            lastName: 'les'
        }
    }
})

原谅我这个实例如此简单...

若是你记性好, 你就会知道 Vue 的全部一切 都是从一个_init(options) 开始的

如今来看揭开 _init 的神秘面纱

第一个起关键做用的条件语句

// path: src/core/instance/init.js
if (options && options._isComponent) {
  // optimize internal component instantiation
  // since dynamic options merging is pretty slow, and none of the
  // internal component options needs special treatment.
  initInternalComponent(vm, options)
} else {
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  )
}

能够看到尤大, 在这里有一些注释, 我的认为这些注释必定要看而且好好理解, 由于这是最好的教程, 可是就算咱们不懂, 咱们依然能够判断出 _isComponent 这个属性是内部属性, 按照咱们的正常流程走下去, 这个是不会用到的, 因此咱们能够直接看else 语句里面的内容, 能够看到 Vue 实例化时作的第一件事情, 就是要合并Vue 的基本配置跟咱们传进来的配置.

看到这里咱们应该要提出一个问题, 就是,为何要合并配置, 提出一个问题以后就是要本身先尝试着回答, 当本身一点头绪都没有时, 才是去询问别人的最好时机, 在这里我想, 这应该是方便读取配置信息, 由于他们都挂载在vm.$options上了 这样, 只要能访问this, 就能访问到配置信息

代码我就不贴了, Vue的基本配置 能够看 src/core/global-api/index.js 内容很简单, 深挖下去就知道 Vue.options 是 一个有 _base, components, filters,directives... 这些属性的对象, 合并了之后, 会加上你传进去的 属性, 在咱们这个例子中就是 el, data.

各类初始化

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

这里能够看见明显的生命周期函数, 也知道了在beforeCreate 里并不能访问到this.xxx 来访问咱们的data属性, 也能知道 inject 是先于 provide 初始化的 那么问题来啦,既然咱们的data已经传了进去给Vue, Vue 怎么可能访问不了呢?
还记得, Vue 作的第一步操做是什么吗? 是合并$options? 咱们传进去的配置全都合并在了这个$options上了.

this.$options.data() // 尝试在beforeCreate() 钩子函数里面执行这段代码
//其实这个深度使用过Vue的人也能够很轻松的发现的(由于文档有提到$options)....

若是你正在看源码, 你还会看见一个 initProxy, 我暂时不知道这段代码的做用, 就是拦截了 config.keyCodes 对象的一些属性设置

_init 的最后一步

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}

若是你指定了挂载的Vue 容器, 那么Vue 就会直接挂载.

咱们来看看Vue.$mount

这个Vue.$mount 要解释一下, 尤大在这里抽取了一个公共的 $mount函数, 要看清楚入口文件才能够找到正确的$mount 函数

<details>
<summary>

$mount函数

</summary>

// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount // 对公共的$mount函数作个保存而后再覆盖
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  
  // resolve template/el and convert to render function
  // 解析 template 或者 el 而后转换成 render function
  if (!options.render) {
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el)
    }
    if (template) {
      /* istanbul ignore if */ // 性能检测
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }

      const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      // 性能检测
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  return mount.call(this, el, hydrating)
}

</details>

咱们能够看到. 一开始就把本来的$mount函数保存了一份, 而后再定义, 本来的$mount(el, hydrating)只有几行代码, 建议本身看一下 src/platforms/web/runtime/index.js

在咱们的实例中, 咱们出了el和data其余什么都没有, 因此这里会用el去getOuterHTML()获取咱们的模板, 也就是咱们的#app

而后调用 compileToFunction 函数, 生成咱们的render函数(render函数式一个返回VNode的函数),这个过程(涉及到AST => 抽象语法树)咱们有须要再去学习,最后再调用共有的$mount(el, hydrating) 方法,而后就来到了咱们的mountComponent(vm, el) 函数了.跟丢了没?

<details>
<summary>mountComponent(vm, el, hydrating)</summary>

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean // 初步估计是跟服务端渲染有关的
): Component {
  // 如今的$el已是一个DOM元素
  vm.$el = el;

  console.log((vm.$options.render),'mountComponent')

  // 正常状况 到这里render 函数已早已成完毕, 这里的判断我猜是在预防render函数生成时出错的
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode // render 函数就是一个返回 VNode 的函数
    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
}

</details>

能够看到这里最重要的操做,就是new Watcher() watcher 是响应式的原理, 用于记录每个须要更新的依赖, 跟Dep相辅相成, 再配合 Object.definedProperty, 完美!

可是咱们渲染为何要通过Warcher呢? 由于要收集依赖啊...

题外话, Watcher 也用于watch的实现, 只不过咱们当前的例子里并无传入watch.

要搞清楚他在这里干了什么, 先搞清楚传进去的参数, 能够看到一个比较复杂的updateComponent 如今咱们来深刻一下.先_render 再 _update

<details>
<summary>Vue.prototype._render</summary>

// src/core/instance/render.js
Vue.prototype._render = function (): VNode {
    const vm: Component = this
    const { render, _parentVnode } = vm.$options
    console.log(render, _parentVnode, '_parentVnode')
    // 解析插槽
    if (_parentVnode) {
      vm.$scopedSlots = normalizeScopedSlots(
        _parentVnode.data.scopedSlots,
        vm.$slots,
        vm.$scopedSlots
      )
    }

    // 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 {
      // There's no need to maintain a stack because all render fns are called
      // separately from one another. Nested component's render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm
      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
      }
    } finally {
      currentRenderingInstance = null
    }
    // 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
  }

</details>

首先咱们这里没有_parentVnode,也没有用到组件, 只是经过new Vue()这种最简单的用法 因此父组件插槽是没有的.

因此这个函数通篇最重要的就是这一句代码

vnode = render.call(vm._renderProxy, vm.$createElement)

看尤大的注释就知道 render 可能回返回一个只有一个值的数组, 或者报错的时候会返回一个空的vnode, 其余操做都是兼容处理, 而后把vnode返回

<details>
<summary>_update</summary>

// src/core/instance/lifecycle.js
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.
}

</details>

这里最主要的就是 vm.$el = vm.__patch__(prevVnode, vnode), 经过patch来挂载 vnode 而且比对两个vnode 的不用与相同, 这就是diff, 在vue中 diff 跟 patch 是一块儿的. 这部分先略过, 咱们先看总体.

深刻watcher

watcher代码挺长的, 我就先贴个构造函数吧

<details>
<summary>Watcher constructor </summary>

constructor (
    vm: Component, // Vue 实例
    expOrFn: string | Function, // updateComponent
    cb: Function, // 空函数
    options?: ?Object, // {before: ()=>{}}
    isRenderWatcher?: boolean // true 为了渲染收集依赖用的
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this 
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep // 给watch属性用 若是watch属性是一个对象且deep为true 那么该对象就是深度watch 相似于深拷贝的概念
      this.user = !!options.user // 若是为true 就是为 watche 属性服务的
      this.lazy = !!options.lazy // lazy若是为true 的话就是computed属性的了, 只不过computed有缓存而已
      this.sync = !!options.sync // 同步就当即执行cb 异步就队列执行cb
      this.before = options.before // 恰好咱们的参数就是有这个属性, 是一个回调函数
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    // 这里咱们传进来的 expOrFn 就是一个 updateComponent() 就是一个函数
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
    // 这里的parsePath 也不难, 回忆一下咱们的 $watch 怎么用的?
    /*  官方文档的例子
    // 键路径
    vm.$watch('a.b.c', function (newVal, oldVal) {
      // 作点什么
    })
    能够看到咱们的第一个参数, 'a.b.c'  其实这个表达式传进来就是咱们的 expOrFn,
    能够去看 $watch函数的代码 最终也仍是要走 new Watcher 这一步的, parsePath就是为了把这个表达式的值给求出来
    这个值是在vm实例上取得 通常在 data 里面最好, 不过在渲染过程当中, 是不走这里的.
    */
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get() // 求值, 其实就是触发咱们的 getter 函数 触发 对象的 get 收集依赖, Vue 的响应式已经烂大街了 (有时间再写一篇), 在这里 这个值一求值, 咱们的 updateComponent 就会执行, _render _updata 和会相应的执行, 而后就实现了咱们的 mount 过程
  }

</details>

最后

至此, 咱们的渲染过程已经学习完毕, 最主要的就是 总体的脉络很是的清晰, 真正须要下功夫的是 虚拟节点的 diff patch跟 template 到 render function 的转化. 共勉!

路漫漫其修远兮, 吾将上下而求索.

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程