This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.

Vue3 has been out for some time, I believe we all know that Vue3 has made some optimizations, such as using Proxy to hijack data, which makes up for some problems caused by Vue2 using defineProperty (such as not being able to sense the change of new attributes of objects, not being able to listen to the length attribute of array, etc.). Before starting to migrate your own projects, understand the API, syntax, and other disruptive aspects of moving from Vue2 projects to Vue3 that are incompatible with Vue2, and then make a migration plan based on the dependencies of existing projects.

Destructive modification

  • Because of tree-shaking considerations, the global API needs to be introduced

    // Vue2 this.$nextTick(() => {}) // Vue3 import { nextTick } from 'vue' setup() { ... nextTick(() => {}) }Copy the code

  • Ref

    The ref binding in V-for defines an array + a function to add an array, instead of creating an array directly, which makes operation more flexible.

    <div v-for="item in list" :ref="setItemRef"></div>

...
data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
Copy the code

  • .sync -> v-model

    Sync modifier + emit(‘update:title’, val) in Vue2. Vue3 can use V-model :title.

    < INPUT V-model ="inputVal"> //Vue2 or V-model :modelValue ="inputVal" < INPUT :value="inputVal" @update:value="inputVal $event"/> // Vue3Copy the code

  • v-for > v-if => v-if > v-for

    In Vue3, when both V-for and V-if are bound to the same component, V-for has a higher priority, whereas Vue3 has the opposite.

  • V-bind now has a sequential difference, with attributes overwritten later when binding objects

  • Asynchronous components need to be created using the defineAsyncComponent method

  • Component events need to be written in emits

    Similar to props, accept an object. Because the. Native modifier is removed, if the emits event not declared in emits is written to the component’s emits event is written to the component’s emits event is written to the component’s attrs, which is attached to the root node of the component, and may fire twice;

  • destroyted => unmounted; beforeDestory => beforeUnmount

  • Data merges in mixins to shallow comparisons

    If the previous data is a nested object, the attributes in the object will also be merged. Vue3 directly overwrites the mixin data object with the same name using the data object in the component.

new

Template, Portal and other functions.

  • template

    Vue2 can use vue-fragment to implement the fragment effect in React. Vue3 supports the fragment effect by default.

  • Teleport

    Similar to Portal in React;

  • $attrs adds class and style attributes.

The abolition of

  • Filters

    You can use computed attributes instead;

  • The :event.native modifier is no longer supported

    Reasonable use emits;

  • $children attribute

    $refs can be used instead.

The above are the changes that the author is concerned about or thinks are important. Please refer to other documents and articles for any changes that have not been introduced.

reference

Migration is introduced