Vue3.x - 1、全局API - 《Vue3.x》

1、新增 createApp
2、修改

1、新增 createApp

入口文件main.js的挂载方式

vue2.x
import Vue from 'vue'
import App from './App.vue'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vue.use();
Vue.component();
Vue.prototype.$http = axios;

Vue2.x是的全局api，是直接修改了Vue对象的一系列属性。

Vue2.x全局API遇到的问题

- 单元测试中,全局配置非常容易污染全局环境
- 在不同的apps中,需要共享一份有不同配置的Vue对象,也变得非常困难

vue3.x
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(store).use(router).mount('#app')

2、修改

2.x全局API	3.x实例API(app)
Vue.config	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

app = createApp();

import Axios from "axios";
const app=createApp(App)
app.config.globalProperties={
  $axios:axios,
  name:"lisi"
}
app.component('child-component', {
    mounted() {
        console.log(this.name); // 'lisi'
    }
});