написать впереди
Поскольку меня очень интересует Vue.js, а технологический стек, над которым я обычно работаю, тоже Vue.js, я потратил некоторое время на изучение и изучение исходного кода Vue.js за последние несколько месяцев и сделал резюме и вывод.
Оригинальный адрес статьи:GitHub.com/ответы на….
В процессе обучения в Vue были добавлены китайские аннотации.GitHub.com/ответы на…, я надеюсь, что это может быть полезно другим друзьям, которые хотят изучить исходный код Vue.
Могут быть некоторые отклонения в понимании.Вы можете поднимать вопросы и указывать, учиться вместе и добиваться прогресса вместе.
$mount
Сначала посмотрите на код mount
/*把原本不带编译的$mount方法保存下来，在最后会调用。*/
const mount = Vue.prototype.$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
/*处理模板templete，编译成render函数，render不存在的时候才会编译template，否则优先使用render*/
if (!options.render) {
let template = options.template
/*template存在的时候取template，不存在的时候取el的outerHTML*/
if (template) {
/*当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为DOM节点的时候*/
template = template.innerHTML
} else {
/*报错*/
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
} else if (el) {
/*获取element的outerHTML*/
template = getOuterHTML(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
/*将template编译成render函数，这里会有render以及staticRenderFns两个返回，这是vue的编译时优化，static静态不需要在VNode更新时进行patch，优化性能*/
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
delimiters: options.delimiters
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`${this._name} compile`, 'compile', 'compile end')
}
}
}
/*Github:https://github.com/answershuto*/
/*调用const mount = Vue.prototype.$mount保存下来的不带编译的mount*/
return mount.call(this, el, hydrating)
}Через код монтирования мы можем видеть, что во время процесса монтирования, если функция рендеринга не существует (функция рендеринга будет использоваться первой, если функция рендеринга существует), шаблон будет скомпилирован в ToFunctions для получения рендеринга и staticRenderFns. Например, если к написанному от руки компоненту добавлен шаблон, он будет скомпилирован во время выполнения. Функция рендеринга вернет узел VNode после выполнения рендеринга страницы и исправления во время обновления. Далее давайте посмотрим, как компилируется шаблон.
некоторые основы
Во-первых, шаблон будет скомпилирован в синтаксическое дерево AST, так что же такое AST?
В информатике абстрактное синтаксическое дерево (сокращенно абстрактное синтаксическое дерево или AST) или синтаксическое дерево (синтаксическое дерево) представляет собой древовидное представление абстрактной синтаксической структуры исходного кода, в частности исходного кода языка программирования. . В частности, вы можете просмотретьабстрактное синтаксическое дерево.
AST получит функцию рендеринга после генерации.Возвратное значение рендеринга — это VNode, который является виртуальным DOM-узлом Vue.Конкретное определение выглядит следующим образом:
export default class VNode {
tag: string | void;
data: VNodeData | void;
children: ?Array<VNode>;
text: string | void;
elm: Node | void;
ns: string | void;
context: Component | void; // rendered in this component's scope
functionalContext: Component | void; // only for functional component root nodes
key: string | number | void;
componentOptions: VNodeComponentOptions | void;
componentInstance: Component | void; // component instance
parent: VNode | void; // component placeholder node
raw: boolean; // contains raw HTML? (server only)
isStatic: boolean; // hoisted static node
isRootInsert: boolean; // necessary for enter transition check
isComment: boolean; // empty comment placeholder?
isCloned: boolean; // is a cloned node?
isOnce: boolean; // is a v-once node?
/*Github:https://github.com/answershuto*/
constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions
) {
/*当前节点的标签名*/
this.tag = tag
/*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/
this.data = data
/*当前节点的子节点，是一个数组*/
this.children = children
/*当前节点的文本*/
this.text = text
/*当前虚拟节点对应的真实dom节点*/
this.elm = elm
/*当前节点的名字空间*/
this.ns = undefined
/*编译作用域*/
this.context = context
/*函数化组件作用域*/
this.functionalContext = undefined
/*节点的key属性，被当作节点的标志，用以优化*/
this.key = data && data.key
/*组件的option选项*/
this.componentOptions = componentOptions
/*当前节点对应的组件的实例*/
this.componentInstance = undefined
/*当前节点的父节点*/
this.parent = undefined
/*简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false*/
this.raw = false
/*静态节点标志*/
this.isStatic = false
/*是否作为跟节点插入*/
this.isRootInsert = true
/*是否为注释节点*/
this.isComment = false
/*是否为克隆节点*/
this.isCloned = false
/*是否有v-once指令*/
this.isOnce = false
}
// DEPRECATED: alias for componentInstance for backwards compat.
/* istanbul ignore next */
get child (): Component | void {
return this.componentInstance
}
}Для получения дополнительной информации о VNode см.Узел VNode.
createCompiler
createCompiler используется для создания компилятора, а возвращаемое значение — compile и compileToFunctions. compile — это компилятор, который преобразует входящий шаблон в соответствующее дерево AST, функцию рендеринга и функцию staticRenderFns. А compileToFunctions — это компилятор с кешем, а staticRenderFns и функции рендеринга будут преобразованы в объекты Function.
Поскольку разные платформы имеют разные параметры, createCompiler передаст baseOptions в соответствии с различием платформы, которые будут объединены с параметрами, переданными самой компиляцией, чтобы получить окончательные finalOptions.
compileToFunctions
Сначала вставьте код compileToFunctions.
/*带缓存的编译器，同时staticRenderFns以及render函数会被转换成Funtion对象*/
function compileToFunctions (
template: string,
options?: CompilerOptions,
vm?: Component
): CompiledFunctionResult {
options = options || {}
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production') {
// detect possible CSP restriction
try {
new Function('return 1')
} catch (e) {
if (e.toString().match(/unsafe-eval|CSP/)) {
warn(
'It seems you are using the standalone build of Vue.js in an ' +
'environment with Content Security Policy that prohibits unsafe-eval. ' +
'The template compiler cannot work in this environment. Consider ' +
'relaxing the policy to allow unsafe-eval or pre-compiling your ' +
'templates into render functions.'
)
}
}
}
/*Github:https://github.com/answershuto*/
// check cache
/*有缓存的时候直接取出缓存中的结果即可*/
const key = options.delimiters
? String(options.delimiters) + template
: template
if (functionCompileCache[key]) {
return functionCompileCache[key]
}
// compile
/*编译*/
const compiled = compile(template, options)
// check compilation errors/tips
if (process.env.NODE_ENV !== 'production') {
if (compiled.errors && compiled.errors.length) {
warn(
`Error compiling template:\n\n${template}\n\n` +
compiled.errors.map(e => `- ${e}`).join('\n') + '\n',
vm
)
}
if (compiled.tips && compiled.tips.length) {
compiled.tips.forEach(msg => tip(msg, vm))
}
}
// turn code into functions
const res = {}
const fnGenErrors = []
/*将render转换成Funtion对象*/
res.render = makeFunction(compiled.render, fnGenErrors)
/*将staticRenderFns全部转化成Funtion对象 */
const l = compiled.staticRenderFns.length
res.staticRenderFns = new Array(l)
for (let i = 0; i < l; i++) {
res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors)
}
// check function generation errors.
// this should only happen if there is a bug in the compiler itself.
// mostly for codegen development use
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production') {
if ((!compiled.errors || !compiled.errors.length) && fnGenErrors.length) {
warn(
`Failed to generate render function:\n\n` +
fnGenErrors.map(({ err, code }) => `${err.toString()} in\n\n${code}\n`).join('\n'),
vm
)
}
}
/*存放在缓存中，以免每次都重新编译*/
return (functionCompileCache[key] = res)
}Мы можем обнаружить, что в замыкании будет объект functionCompileCache в качестве кеша.
/*作为缓存，防止每次都重新编译*/
const functionCompileCache: {
[key: string]: CompiledFunctionResult;
} = Object.create(null)После входа в compileToFunctions она сначала проверит, есть ли в кеше скомпилированный результат, и если результат есть, то будет прочитан прямо из кеша. Это предотвращает необходимость каждый раз перекомпилировать один и тот же шаблон.
// check cache
/*有缓存的时候直接取出缓存中的结果即可*/
const key = options.delimiters
? String(options.delimiters) + template
: template
if (functionCompileCache[key]) {
return functionCompileCache[key]
}Результат компиляции будет кэширован в конце compileToFunctions.
/*存放在缓存中，以免每次都重新编译*/
return (functionCompileCache[key] = res)compile
/*编译，将模板template编译成AST树、render函数以及staticRenderFns函数*/
function compile (
template: string,
options?: CompilerOptions
): CompiledResult {
const finalOptions = Object.create(baseOptions)
const errors = []
const tips = []
finalOptions.warn = (msg, tip) => {
(tip ? tips : errors).push(msg)
}
/*做下面这些merge的目的因为不同平台可以提供自己本身平台的一个baseOptions，内部封装了平台自己的实现，然后把共同的部分抽离开来放在这层compiler中，所以在这里需要merge一下*/
if (options) {
// merge custom modules
/*合并modules*/
if (options.modules) {
finalOptions.modules = (baseOptions.modules || []).concat(options.modules)
}
// merge custom directives
if (options.directives) {
/*合并directives*/
finalOptions.directives = extend(
Object.create(baseOptions.directives),
options.directives
)
}
// copy other options
for (const key in options) {
/*合并其余的options，modules与directives已经在上面做了特殊处理了*/
if (key !== 'modules' && key !== 'directives') {
finalOptions[key] = options[key]
}
}
}
/*基础模板编译，得到编译结果*/
const compiled = baseCompile(template, finalOptions)
if (process.env.NODE_ENV !== 'production') {
errors.push.apply(errors, detectErrors(compiled.ast))
}
compiled.errors = errors
compiled.tips = tips
return compiled
}Компиляция в основном делает две вещи: одна — объединяет параметры (собственные параметры платформы объединяются с входящими параметрами, как упоминалось выше), а другая — baseCompile, которая компилирует шаблон шаблона.
Взгляните на baseCompile
baseCompile
function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
/*parse解析得到ast树*/
const ast = parse(template.trim(), options)
/*
将AST树进行优化
优化的目标：生成模板AST树，检测不需要进行DOM改变的静态子树。
一旦检测到这些静态树，我们就能做以下这些事情：
1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了。
2.在patch的过程中直接跳过。
*/
optimize(ast, options)
/*根据ast树生成所需的code（内部包含render与staticRenderFns）*/
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
}baseCompile сначала проанализирует шаблон шаблона, чтобы получить синтаксическое дерево AST, затем выполнит некоторую оптимизацию с помощью оптимизации и, наконец, получит рендеринг и staticRenderFns с помощью генерирования.
parse
Исходный код синтаксического анализа можно найти вGitHub.com/ответы на….
parse будет анализировать инструкции, класс, стиль и другие данные в шаблоне шаблона, используя обычные методы для формирования синтаксического дерева AST.
optimize
Основная функция оптимизации состоит в том, чтобы пометить статические статические узлы, что является оптимизацией Vue во время процесса компиляции.Когда интерфейс обновления будет обновлен позже, будет процесс исправления, и алгоритм сравнения будет напрямую пропускать статические узлы, тем самым сокращение процесса сравнения, что оптимизирует производительность патча.
generate
generate — это процесс преобразования синтаксического дерева AST в строку функции рендеринга, а результатом является строка рендеринга и строка staticRenderFns.
На данный момент наш шаблон шаблона был преобразован в синтаксическое дерево AST, строку функции рендеринга и строку staticRenderFns, которые нам нужны.
Например
Взгляните на результат компиляции этого кода
<div class="main" :class="bindClass">
<div>{{text}}</div>
<div>hello world</div>
<div v-for="(item, index) in arr">
<p>{{item.name}}</p>
<p>{{item.value}}</p>
<p>{{index}}</p>
<p>---</p>
</div>
<div v-if="text">
{{text}}
</div>
<div v-else></div>
</div>Дерево AST получается после преобразования, как показано ниже:
Мы видим, что самый внешний div является корневым узлом дерева AST.На узле имеется много данных, представляющих форму узла, например, static указывает, является ли это статическим узлом или нет, а staticClass указывает на статический узел. атрибут класса (не привязка: класс). Children представляет собой дочерние узлы узла.Вы можете видеть, что children представляет собой массив длины 4, который содержит четыре дочерних узла div под узлом. Узлы в дочерних узлах аналогичны по структуре родительскому узлу, формируя синтаксическое дерево AST слой за слоем.
Давайте посмотрим на функцию рендеринга, полученную AST.
with(this){
return _c( 'div',
{
/*static class*/
staticClass:"main",
/*bind class*/
class:bindClass
},
[
_c( 'div', [_v(_s(text))]),
_c('div',[_v("hello world")]),
/*这是一个v-for循环*/
_l(
(arr),
function(item,index){
return _c( 'div',
[_c('p',[_v(_s(item.name))]),
_c('p',[_v(_s(item.value))]),
_c('p',[_v(_s(index))]),
_c('p',[_v("---")])]
)
}
),
/*这是v-if*/
(text)?_c('div',[_v(_s(text))]):_c('div',[_v("no text")])],
2
)
}_с, _в, _с, _к
Глядя на строку функции рендеринга, я обнаружил, что там много _c, _v, _s, _q Что это за функции?
С вопросами, давайте посмотримcore/instance/render.
/*处理v-once的渲染函数*/
Vue.prototype._o = markOnce
/*将字符串转化为数字，如果转换失败会返回原字符串*/
Vue.prototype._n = toNumber
/*将val转化成字符串*/
Vue.prototype._s = toString
/*处理v-for列表渲染*/
Vue.prototype._l = renderList
/*处理slot的渲染*/
Vue.prototype._t = renderSlot
/*检测两个变量是否相等*/
Vue.prototype._q = looseEqual
/*检测arr数组中是否包含与val变量相等的项*/
Vue.prototype._i = looseIndexOf
/*处理static树的渲染*/
Vue.prototype._m = renderStatic
/*处理filters*/
Vue.prototype._f = resolveFilter
/*从config配置中检查eventKeyCode是否存在*/
Vue.prototype._k = checkKeyCodes
/*合并v-bind指令到VNode中*/
Vue.prototype._b = bindObjectProps
/*创建一个文本节点*/
Vue.prototype._v = createTextVNode
/*创建一个空VNode节点*/
Vue.prototype._e = createEmptyVNode
/*处理ScopedSlots*/
Vue.prototype._u = resolveScopedSlots
/*创建VNode节点*/
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)С помощью этих функций функция рендеринга, наконец, вернет узел VNode.Во время _update патч сравнивается с предыдущим узлом VNode, и различия отображаются в реальном DOM после получения различий.
о
Автор: Ран Мо
Электронная почта: answerhuto@gmail.com или answerhuto@126.com
Github: github.com/answershuto
Знать домашнюю страницу:ууууууу. chi.com/people/grass-…
Знать столбец:zhuanlan.zhihu.com/ranmo
Самородки:Талант /user/289926…
Ос Китай:no.OSCHINA.net/U/3161824/no…
Пожалуйста, указывайте источник при перепечатке, спасибо.
Добро пожаловать, чтобы обратить внимание на мой общедоступный номер