Changes to Vue 3 and VUe2

vue3

Record the v3 version changes

• V-ref changes on V-for generate array returns before they do, now you need a custom function to hold each item

• New asynchronous defineAsyncComponent definition, similar to React Loadable.

Rename the Component option to loader.

• Class style will not be in array until $attrs changes

• $children instance attribute deletion is no longer supported.

• Custom directives change, incompatible, and declare the cycle name consistent with the component life cycle.

• The data option has been changed to be a function that must return object, and the Mixin merge behavior has changed so that shallow merges are now performed when data() from a component and its Mixin or extends base classes are merged:

const Mixin = {
 data() {
   return {
     user: {
       name: 'Jack',
       id: 1
     }
   }
 }
}
const CompA = {
 mixins: [Mixin],
 data() {
   return {
     user: {
       id: 2
     }
   }
 }
}
Copy the code

<! --v2:--> { user: { id: 2, name: 'Jack' } }Copy the code

<! --v3--> { user: { id: 2 } }Copy the code

• Add emits similar to the props before, if the emits attribute is not written, add emit to emit. Add emit to attrs. Attrs will be added to the root attribute of the component.

So try to write down the reason why the native modifier has been cancelled, which is easy to bind two events

• Event API removes onon onoff once, so the event bus evenbus can’t use once, so the event bus evenbus can’t use once, so the event bus evenbus can’t use once, so the event bus evenbus can’t use once, so the event bus evenbus can’t use once, so the event bus evenbus can’t use once, so the event bus evenbus can’t use once, so the event bus evenbus can’t use once. Because it is used to trigger event handlers added declaratively by the parent component.

• Filter before delete pipe |, after using computed to calculate. You can also use global filters:

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
Copy the code

• Fragments: Vue 3 now officially supports multi-node components, aka fragments!

• A new global API: createApp

Prototype replaced with config.globalProperties,

The global API has been replaced with an import module, and $nextTick has become an import module

• New: Branch keys for V-if/V-else/V-else -if are no longer required, as Vue now automatically generates unique keys.

Incompatibility: If you supply keys manually, each branch must use a unique key. You cannot force reuse of branches by deliberately using the same key. Not compatible with: