Бета-версия Vue 3.1.0

Vue.js

Раньше он был переведен для всех, но на этот раз я представлю его в другом формате.

Эта статья написанаQC-Lа такжеKnowsCountЗавершение работы по написанию и редактированию.

Vueconf 2021 состоится в Ханчжоу 22 мая 2021 года, в онлайн-линии, и Yusuxi будет предстоящим. Возьмите адрес:vue.w3ctech.com

Эта бета-версия содержит несколько интересных новых функций и исправлений ошибок.

новые особенности

  • onServerPrefetch: версия serverPrefetch с составным API
  • компонентный уровеньcompilerOptions
  • @vue/compiler-coreПоддержка стратегии обработки пробелов
  • поддержка черезapp.config.compilerOptionsНастройте компилятор времени выполнения
  • devtools улучшил поддержку KeepAlive
  • поддержка черезis="vue:xxx"Преобразование обычных элементов в компоненты

onServerPrefetch

Для получения подробной информации см.PR 3070а такжеPR 2902

Эта функция в основном решаетcomposition-apiНет проблем с предоставлением функции обработчика жизненного цикла serverPrefetch.

Эта функция ловушки называетсяonServerPrefetch.

Если вам это тоже нужно, вы можете попробовать обновиться до3.1.0-betaВерсия

Связанные обсуждения:

@vue/complier-coreПоддержка стратегии обработки пробелов

Для получения подробной информации см.PR 1600а такжеv2 оригинальный эффект.

заявление

Давайте протестируем эту стратегию:

Сначала установите бета-версию@vue/compiler-core

yarn add @vue/compiler-core@beta

новыйindex.jsдокумент

const core = require('@vue/compiler-core')

const { baseCompile: complie } = core

const { ast } = complie(`      foo \n bar baz      `, {
  whitespace: 'preserve' // condense
})

console.log(ast.children[0])
console.log(ast.children[0].content)

Примерный эффект показан в примере:

<!-- 源代码 -->
      foo \n bar baz     

<!-- whitespace: 'preserve' -->
      foo \n bar baz     

<!-- whitespace: 'condense' -->
 foo bar baz

исходный код

изначально толькоcompiler-coreизparseв файлеdefaultParserOptionsпредоставляется по умолчаниюcondenseусловие

whitespace: 'condense'

существуетcompiler-coreдобавлен в файл опцийwhitespace:

whitespace?: 'preserve' | 'condense'

Ссылки по теме:

пройти черезis="vue:xxx"Поддержка преобразования общих элементов

Обновление этой функции, с точки зрения исходного кода, совместимо с двумя типами.

  1. устарелv-isинструкция
  2. is="vue:xxx"свойства

исходный код


let { tag } = node

// 1. 动态组件
const isExplicitDynamic = isComponentTag(tag)
const isProp =
  findProp(node, 'is') || (!isExplicitDynamic && findDir(node, 'is'))
if (isProp) {
  if (!isExplicitDynamic && isProp.type === NodeTypes.ATTRIBUTE) {
    // <button is="vue:xxx">
    // 如果不是 <component>，仅仅是 "vue:" 开头
    // 在解析阶段会被视为组件，并在此处进行
    // tag 被重新赋值为 "vue:" 以后的内容
    tag = isProp.value!.content.slice(4)
  } else {
    const exp =
      isProp.type === NodeTypes.ATTRIBUTE
        ? isProp.value && createSimpleExpression(isProp.value.content, true)
        : isProp.exp
    if (exp) {
      return createCallExpression(context.helper(RESOLVE_DYNAMIC_COMPONENT), [
        exp
      ])
    }
  }
}

// 当 tag 为 <component>，或者 is="vue:xxx"，跳过后续处理
if (
  name === 'is' &&
  (isComponentTag(tag) || (value && value.content.startsWith('vue:')))
) {
  continue
}
// ...

В приведенном выше коде есть несколько пунктов:

  1. первыйisComponentTag, чтобы определить, является ли он динамическим компонентом:
// 此方法用于判断是否为动态组件
function isComponentTag(tag: string) {
  return tag[0].toLowerCase() + tag.slice(1) === 'component'
}
  1. Узнайте, содержит ли онisАтрибуты
// 先查属性
findProp(node, 'is')
// 否则判断是不是动态组件，如果不是，判断是不是指令
!isExplicitDynamic && findDir(node, 'is')

Основная причина этого заключается в том, что структура AST двух различна.

Ссылки по теме:

Исправлена ​​ошибка

  • совместимый:Обработка и внедрение предупреждений для config.optionMergeStrategies (94e69fd)
  • compiler-core:Когда опция аннотаций включена, аннотации сохраняются в производстве (e486254)
  • hmr:Отключить удаление значений ключа __file из типов компонентов (9db3cbb)
  • hydration:Исправлено обновление компонента asnyc перед гидратацией (#3563) (c8d9683), closes #3560
  • reactivity:Исправить трассировку для readonly + реактивной карты (#3604) (5036c51), closes #3602
  • runtime-core:Убедитесь, что ключ, объявляющий свойства, всегда существует (4fe4de0), closes #3288
  • runtime-core:Отслеживание нескольких источников: вычислено (#3066) (e7300eb), closes #3068
  • Teleport:Избегайте изменения ссылок на vnode.dynamicChildren (#3642) (43f7815), closes #3641
  • watch:Избегайте повторения непростых объектов (62b8f4a)
  • watch:this.$watch должен поддерживать ключевые пути прослушивания (870f2a7)

характеристика

  • onServerPrefetch (#3070) (349eb0f)
  • Компилятор среды выполнения поддерживает уровень компонентовcompilerOptions (ce0bbe0)
  • compiler-core:стратегия обработки пробелов (dee3d6a)
  • config:использоватьapp.config.compilerOptionsПоддержка настройки компилятора времени выполнения (091e6d6)
  • devtools:Обновление поддержки KeepAlive (03ae300)
  • Поддерживает приведение простых элементов к компонентам с is="vue:xxx" (af9e699)

повышение производительности

  • Обновление $attrs будет запущено только тогда, когда оно действительно изменится (5566d39)
  • compiler:Пропускать ненужные проверки при разборе закрывающих тегов (048ac29)
Категории