With the gradual stabilization of the Vue 3 ecosystem, the migration version of Vue 3 is also on the agenda.

Just earlier today, the official Vue team officially released v3.1.0.

Subsequent releases will focus on making it easier for you to migrate from Vue 2 to Vue 3.

To this end, the official team made a lot of efforts.

Document update

The official team has made further improvements to PR 1033 for migrating documentation

The documents of Vue Compat warehouse mentioned by UVU in Vue Conf China 2021 have also been merged into the official document, which is connected to the migration build.

Destructive change

There are two small disruptive changes in this update,

1. The key declared in props will always exist. Whether the parent component passes the key or not.

The core code in the source code is as follows:

// ensure all declared prop keys are present
for (const key in instance.propsOptions[0]) {
  if(! (keyin props)) {
    props[key] = undefined // If the key does not exist in props, it is declared in props by default}}Copy the code

This can lead to changes in behavior such as (issues cases) :

Because the field is always there, an exception occurs when using hasOwnProperty.

Old:

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

New:

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

The official document explains:

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:

If you have problems with this, you can modify it as follows:

const isAbsent = Symbol(a)export default {
  props: {
    foo: { default: isAbsent }
  },
  setup(props) {
    if (props.foo === isAbsent) {
      // foo is absent}}}Copy the code

Related links:

  • issue 3288
  • issue 3889
  • commit
  • Document update

2. optionsMergeStrategiesThe component instance is no longer accepted as the third parameter

This will not affect you much, but will be used to generate warnings.

deprecated

  • app.config.isCustomElementHas been abandoned, should be usedapp.config.compilerOptionsUnder theisCustomElementOptions.The document
  • delimitersComponent option has been deprecated. Please usecompilerOptionsUnder thedelimitersOptions.The document
  • v-isDeprecated, please useis="vue:xxx"Instead.The document

conclusion

For additional updates, see the Vue 3.1.0 beta release we wrote.

In the end, the Vue Conf speech by UVU is attached to help you understand it further.