Руководство по исходному коду Vue 3

внешний интерфейс Vue.js внешний фреймворк

Ранним утром 5-го Ю Юйси объявила:Исходный код Vue 3.

Без дальнейших церемоний, давайте проведем краткий анализ исходного кода Vue 3, пока он горячий.

Если вы не читалиComposition API RFC, может не полностью понять следующее содержание.

совместимость

Текущий упакованный код — ES2015+, который не поддерживает IE 11.

Использование машинописного текста

Более 98% текущего кода написано на TypeScript.

Если вы еще не изучили TypeScript, изучите его как можно скорее, иначе вы не сможете понять исходный код.

Еще одна вещь, которая может вас удивить, это исходный код Vue 3.Точно нетИспользуйте ключевое слово класса! (Ключевое слово class используется только в тестовом коде и примере кода)

Когда выйдет официальная версия

Vue 3 в настоящее время находится в предварительной альфа-версии. Позже должны быть Альфа, Бета и другие версии.

согласно сОфициальное расписание Vue, официальная версия 3.0 не будет выпущена как минимум до первого квартала 2020 года.

рекомендации по чтению

Настоятельно рекомендуется взглянуть на исходный код Vue 3 во время празднования Национального дня, потому что текущая структура кода понятна, а объем кода относительно невелик.

После загрузки кода его можно отладить с помощью команды yarn dev. (Кто-то дал подробноеСоветы по отладке)

Что касается порядка чтения, мое предложение

  1. Сначала прочитайте реактивность, вы сможете быстро понять новые функции Vue 3;
  2. Прочтите rumtime еще раз, чтобы понять реализацию компонентов и жизненных циклов;
  3. Если у вас еще есть время, прочтите компилятор еще раз, чтобы понять процесс оптимизации компиляции.

Кроме того, если вы хотите сэкономить время, вы можете напрямую смотреть все__tests__Тестовые примеры в каталоге, чтобы изучить все возможности Vue 3. В настоящее время существует менее 700 тестовых случаев.

структура кода

В репозитории кода есть каталог пакетов, в котором реализованы основные функции Vue 3, в том числе

  • Каталог реактивности: система реагирования на данные, это отдельная система, которую можно использовать с любым фреймворком.
  • Каталог runtime-core: Независимая от платформы среда выполнения. Функции, которые он реализует, включают средства рендеринга виртуальных DOM, компоненты Vue и различные API-интерфейсы Vue.Мы можем использовать эту среду выполнения для реализации высокоуровневых сред выполнения для конкретной платформы, например, пользовательских средств рендеринга.
  • Каталог runtime-dom: среда выполнения для браузеров. Его возможности включают обработку собственных API-интерфейсов DOM, событий DOM и свойств DOM.
  • Каталог runtime-test: облегченная среда выполнения, написанная специально для тестирования. Поскольку дерево DOM, «отображаемое» этой средой выполнения, на самом деле является объектом JS, эту среду выполнения можно использовать во всех средах JS. Вы можете использовать его, чтобы проверить правильность рендеринга. Его также можно использовать для сериализации DOM, запуска событий DOM и регистрации операций DOM во время обновления.
  • каталог server-renderer: для SSR. Еще не реализовано.
  • Каталог-ядра компилятора: независимые от платформы компиляторы.Он содержит как расширяемую базовую функциональность, так и все независимые от платформы плагины.
  • Каталог компилятора: компиляторы, написанные для браузеров.
  • общий каталог: не предоставляет никакого API, в основном содержит некоторые независимые от платформы внутренние вспомогательные методы.
  • каталог vue: используется для сборки версии «полной сборки» со ссылкой на среду выполнения и компилятор, упомянутые выше.

Как видите, новый репозиторий кода Vue является модульным. Далее давайте рассмотрим API, предоставляемые каждым модулем, один за другим.

Модуль @vue/runtime-core

Большинству разработчиков Vue не следует использовать этот модуль, поскольку он предназначен для пользовательских средств визуализации.

Пример использования:

import { createRenderer, createAppAPI } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
  pathcProp,
  insert,
  remove,
  createElement,
  // ...
})

// `render` 是底层 API
// `createApp` 会产生一个 app 实例，该实例拥有全局的可配置上下文
export { render, createApp }

export * from '@vue/runtime-core'

Модуль @vue/runtime-dom

Этот модуль представляет собой среду выполнения в браузере, написанную на основе вышеуказанного модуля, и его основная функция заключается в адаптации добавления, удаления, изменения и запроса узлов и атрибутов узлов в среде браузера. Он предоставляет два важных API: render и createApp, а также объявляет интерфейс ComponentPublicInstance.

export { render, createApp }

// re-export everything from core
// h, Component, reactivity API, nextTick, flags & types
export * from '@vue/runtime-core'

export interface ComponentPublicInstance {
  $el: Element
}

Модуль @vue/runtime-test

Основная функция этого модуля — использовать объекты для представления DOM-дерева, что удобно для тестирования. И предоставляет множество полезных API для простого тестирования:

export { render, createApp }

// convenience for one-off render validations
export function renderToString(vnode: VNode) {
  const root = nodeOps.createElement('div')
  render(vnode, root)
  return serializeInner(root)
}

export * from './triggerEvent'
export * from './serialize'
export * from './nodeOps'
export * from './jestUtils'
export * from '@vue/runtime-core'

@vue/модуль реактивности

Это чрезвычайно важный модуль, это система, реагирующая на данные. Основными API, которые он предоставляет, являются ref (контейнер данных), реактивный (отзывчивые данные, основанные на реализации прокси), вычисляемый (вычисляемые данные), эффект (побочный эффект) и другие части:

export { ref, isRef, toRefs, Ref, UnwrapRef } from './ref'
export {
  reactive,
  isReactive,
  readonly,
  isReadonly,
  toRaw,
  markReadonly,
  markNonReactive
} from './reactive'
export {
  computed,
  ComputedRef,
  WritableComputedRef,
  WritableComputedOptions
} from './computed'
export {
  effect,
  stop,
  pauseTracking,
  resumeTracking,
  ITERATE_KEY,
  ReactiveEffect,
  ReactiveEffectOptions,
  DebuggerEvent
} from './effect'
export { lock, unlock } from './lock'
export { OperationTypes } from './operations'

Очевидно, что этот модуль является ядром Composition API, и ref и reactive следует освоить.

@vue/модуль ядра компилятора

Этот компилятор предоставляет API, связанные с AST и baseCompile, которые могут преобразовать строку в AST.

export function baseCompile(
  template: string | RootNode,
  options: CompilerOptions = {}
): CodegenResult {
  // 详情略 ...
  return generate(ast, options)
}

export { parse, ParserOptions, TextModes } from './parse'
export { transform /* ... */ } from './transform'
export { generate, CodegenOptions, CodegenContext, CodegenResult} from './codegen'
export { ErrorCodes, CompilerError, createCompilerError } from './errors'
export * from './ast'

Модуль @vue/compiler-dom

Этот модуль основан на предыдущем модуле и адаптирован для браузеров, таких как специальная обработка тегов textarea и style.

Модуль @vue/server-renderer

В настоящее время этот модуль не реализует никакой функциональности.

vue-модуль

Этот модуль просто представляет среду выполнения и компилятор:

import { compile, CompilerOptions } from '@vue/compiler-dom'
import { registerRuntimeCompiler, RenderFunction } from '@vue/runtime-dom'

function compileToFunction(
  template: string,
  options?: CompilerOptions
): RenderFunction {
  const { code } = compile(template, {
    hoistStatic: true,
    ...options
  })
  return new Function(code)() as RenderFunction
}

registerRuntimeCompiler(compileToFunction)

export { compileToFunction as compile }
export * from '@vue/runtime-dom'

Подписывайтесь на меня

Следите за мной, если будут какие-то новые новости о Vue 3, я дам анализ как можно скорее.

над.

Категории