Vue 3でのグローバルApiからアプリケーションインスタンスへの変更

VueグローバルApiが適用インスタンスに変更されました
Vue 2のグローバルApi
vue 2のグローバルApiはvueの挙動をグローバルに変えることができ,この操作は他の試験例を意外に汚染しやすい.

import { createLocalVue, mount } from '@vue/test-utils'
//   vue     
const localVue = createLocalVue()
//  `local`Vue           
localVue.use(Myplugin)
//   localVue     
mount(Component, { localVue })

グローバル構成では、同じページ上の複数のapp間でVueコピーを共有することは非常に困難です.

//    mixin         
Vue.mixin({
  /* ... */
})

const app1 = new Vue({ el: '#app1' })
const app2 = new Vue({ el: '#app2' })

Vue 3の新しいグローバルApi:createApp
createAppはアプリケーションのインスタンスを返します.

import { createApp } from 'vue'
const app = createApp({})

//       Vue CDN，  createApp      Vue     
const { createApp } = Vue
const app = createApp({})

Vue 3におけるコントラストVue 2グローバルApiの変化
2.xグローバルApi
3.xインスタンス(app)Api
Vue.cofing
app.config
Vue.config.productionTip
*削除
Vue.config.ignoredElements
* app.config.isCustomElement
Vue.component
app.component
Vue.directive
app.directive
Vue.mixin
app.mixin
Vue.use
* app.use
Vue.prototype
* app.config.globalProperties
他のすべての非グローバルな動作を変更するグローバルApiは、exportsと命名されました.
config.productionTip除去
Vue 3.xでは、「本番バージョンの使用」プロンプトは、「dev+full build」(ランタイムコンパイラと警告付きコンストラクションを含む)を使用する場合にのみ表示されます.
ESモジュール構築では、bundlerとともに使用されているため、CLIまたはテンプレートが本番環境を正しく構成している場合が多いため、このテクニックは使用されません.
config.ignoredElementsをconfigに置き換える.isCustomElement
この構成項目を導入したのは、オリジナルのカスタム要素をサポートするためで、名前の変更によってその機能がよりよく伝わり、新しいオプションにはString/RegExpを使用するよりも柔軟な関数が必要です.

// 2.x
Vue.config.ignoredElements = ['my-el', /^ion-/]
// 3.x
const app = createApp({})
app.config.isCustomElement = tag => tag.startsWith('ion-')

  Vue 3  ，                    ，                      。        runtime-only    isCustomElement      @vue/compiler-dom        ——  ，   compilerOptions option in vue-loader。

   config.isCustomElement            ，     ，               ；
    Vue CLI          。

Vue.prototypeをconfigに置き換える.globalProperties
Vue 2では、Vue.prototypeは通常、すべてのコンポーネントがアクセスできるpropertyをVue 3でconfigと同等に追加する.globalPropertiesこれらのpropertyは、インスタンス化コンポーネントの一部としてアプリケーションにコピーされます.

// 2.x
Vue.prototype.$http = () => {}

// 3.x
const app = createApp({})
app.config.globalProperties.$http = () => {}
//   provide ，      globaProperties    

プラグインの使用
プラグイン開発者は通常vueを使用する.use、例えば公式のvue-routerがブラウザ環境でどのように自分でインストールされているか

var inBrowser = typeof window !== 'undefined'
/* ... */
if(inBrowser && window.Vue) {
  window.Vue.use(VueRouter)
}

現在useグローバルApiは使用されていませんので、このプラグインの使用を手動で指定する必要があります.

const app = createApp(MyApp)
app.use(VueRouter)

Appインスタンスのマウント
createAppを使用する初期化後、アプリケーションインスタンスappはappを使用することができる.mount(domTarget)はコンポーネントインスタンスに掛けられており、以上の変更により、完全な書き方は以下のコードに書き換えられます.

import { createApp } from 'vue'
import MyApp from './MyApp.vue'

const app = createApp(MyApp)
app.componenet('button-counter', {
  data: () => ({
    count: 0
  }),
  template:`Clicked {{ count }} times.`
})

app.directive('focus', {
  mounted: el => el.focus()
})
app.mount('#app')

Provide/inject
と2.xは、インスタンスでprovideオプションを使用するのと同様に、Vue 3アプリケーションインスタンスは、アプリケーション内の任意のコンポーネントによって注入される依存性を提供することもできる.

//     
app.provide('guide', 'Vue 3 Guide')
//    
export default {
  inject: {
    book: {
      from: 'guide'
    }
  },
  template: `
{{ book }}
`
}
//    provide           ，     globalProperties

アプリケーション間の共有構成
コンポーネントや命令などの構成をアプリケーション間で共有する方法の1つとして、コンポーネントファクトリを作成するには、次の手順に従います.

import { createApp } from 'vue'
import F00 from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = options => {
  const app = createApp(options)
  app.directive('focus', /* ... */)

  return app
}

createApp(Foo).mount('#foo')
createApp(Bar).mount('#bar')