Vue 3 Migration Guide All In One

Vue 3 迁移指南汇总

Breaking Changes

https://v3-migration.vuejs.org/breaking-changes/

Removed APIs

v-on keyCode Modifiers

// kebab-case

KeyboardEvent.keyCode ?? ?

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

KeyboardEvent.code ?? ?

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

Events API

createApp(App, {
  // Listen for the 'expand' event
  onExpand() {
    console.log('expand')
  }
});

// eventBus.js
import emitter from 'tiny-emitter/instance'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args)
}

Filters

// Component Filters (computed properties)

// Global Filters ($filters)

// main.js (app.config.globalProperties.$filters)
const app = createApp(App);
app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

inline-template

const MyComp = {
  template: '#my-comp-template'
  // ...
}

  {{ msg }} {{ childState }}




  {{ parentMsg }} {{ childState }}

$children

// no longer exist any more

propsData option

const app = createApp(
  {
    props: ['username'],
    template: '
{{ username }}
'
  },
  { username: 'Evan' }
);

https://v3-migration.vuejs.org/breaking-changes/#removed-apis

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！