Выпущен Vue v3.1.0 Плутон

С постепенной стабилизацией экосистемы Vue 3 миграционная версия Vue 3 также стоит на повестке дня.

Буквально сегодня официальная команда Vue официально выпустила версию v3.1.0.

Последующие выпуски будут посвящены упрощению перехода с Vue 2 на Vue 3.

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

Обновление документации

Официальная команда дополнительно улучшила миграционную документациюPR 1033

Среди них наиболееVue Conf China 2021упомянутый вышеVue CompatДокументация склада также объединена с официальной документацией, и ее подключениеСборка миграции.

критические изменения

В этом обновлении есть два небольших критических изменения,

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

Основной код в исходном коде выглядит следующим образом:

// ensure all declared prop keys are present
for (const key in instance.propsOptions[0]) {
  if (!(key in props)) {
    props[key] = undefined // 如果 key 不存在 props 中，将默认在 props 中进行声明
  }
}

Это приводит к некоторым поведенческим изменениям, таким как (дело в проблемах):

Поскольку поле всегда существует, поэтому использованиеhasOwnProperty, возникает исключение.

Old:

const propsToAdd = {
  'value': props.hasOwnProperty('modelValue') ? props.modelValue : props.value
}

New:

const propsToAdd = {
  'value': props.hasOwnProperty('modelValue') && props.modelValue !== undefined ? props.modelValue : props.value
}

Официальная документация дает соответствующее пояснение:

Similar to this.$props when using Options API, the props object will only contain explicitly declared props. Also, all declared prop keys will be present on the props object, regardless of whether it was passed by the parent component or not. Absent optional props will have a value of undefined.

If you need to check the absence of an optional prop, you can give it a Symbol as its default value:

Если вы столкнулись с этой проблемой, вы можете изменить ее следующим образом:

const isAbsent = Symbol()

export default {
  props: {
    foo: { default: isAbsent }
  },
  setup(props) {
    if (props.foo === isAbsent) {
      // foo is absent
    }
  }
}

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

issue 3288
issue 3889
commit
Обновление документации

2. `optionsMergeStrategies`больше не получает экземпляр компонента в качестве третьего параметра

Это мало влияет на всех и в основном используется для генерации предупреждений.

устарел

app.config.isCustomElementУстарело и должно использоватьсяapp.config.compilerOptionsвнизisCustomElementопции.Документация
delimitersопция компонента устарела, пожалуйста, используйтеcompilerOptionsвнизdelimitersопции.Документация
v-isУстарело, пожалуйста, используйтеis="vue:xxx"заменять.Документация

Суммировать

Для получения информации о других обновлениях см.Выпущена бета-версия Vue 3.1.0.