共计 11593 个字符，预计需要花费 29 分钟才能阅读完成。
无规矩不成方圆
在技术领域上更是如此, 比如: 类名头字母大写, promiseA+ 规范, DOM 标准, es 标准, 都是规矩, 是我们编码的规矩.
框架亦是如此, 比如 Vue 就是尤大的一套规矩, 在编程的世界里, 你牛逼, 你就能制定规矩, 别人要使用你的框架, 就得遵从你的规矩, 而如果你要在别人的框架里来去自由, 你就得熟悉他的规矩, 就好比你想在某国大有作为, 你也得熟悉该国的法律不是?
为了不受限于 Vue 只能深入一下了
2.6 版本
Vue 执行过程 (new Vue({}) 之前)
<details>
<summary>
Vue 构造函数
</summary>
// 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 实例的原型链上添加了诸多的方法
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(), 这些在分析过程中遇到再去了解
现在来看一个实例(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 的转化. 共勉!
