【vue3学习系列】配置的改动以及全局配置的写法

前言

vue3相交于vue2在一些配置方面有所不同，vue3更加侧重按需引入的策略。

main.js

在这个入口文件中，vue3是通过按需导入的 createApp 方法来来构建 vue 实例，然后再用use方法去挂载需要的功能，没有了2的构造方法，无法再挂载原型。

下面来细看一下二者区别。

vue2全局配置

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

Vue.prototype.customProperty = () => {}

new Vue({
  render: h => h(App)
}).$mount('#app')

Vue2 这样写在一定程度上修改了 Vue 对象的全局状态。

• 在单元测试中，全局配置非常容易污染全局环境，用户需要在每次 case 之间，保存和恢复配置。有一些 api （vue use、vue mixin）甚至没有方法恢复配置，这就让一些插件的测试非常的困难。
• 在不同的 APP 中，如果想共享一份有不同配置的 vue 对象，也变得非常困难。

vue3全局配置

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

const app = createApp(App)
// 这个时候 app 就是一个 App 的实例，现在再设置任何的配置是在不同的 app 实例上面的，不会像vue2 一样发生任何的冲突。

app.config.isCustomElement = tag => tag.startsWith('app-')
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.config.globalProperties.customProperty = () => {} // 挂载全局的方法

// 当配置结束以后，我们再把 App 使用 mount 方法挂载到固定的 DOM 的节点上。
app.mount(App, '#app')

这里再补充一下如何使用全局方法：

<script lang="ts">
import { getCurrentInstance } from "vue";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as any; // 获取注册vue中的全局方法，当然用any类型是不妥的，以后看看用啥能代替
		// 然后通过proxy.customProperty使用这个customProperty全局方法
	}
});
</script>

其他改动

• 删除config.productionTip
• config.ignoredElements 改名为 config.isCustomElement
• 删除config.keyCodes

拓展：Treeshaking

---

vuex

• 也是按需引入的形式构建store实例
• 没有 Vue.use(Vuex) 的形式进行挂载了

传送门【vue3学习系列】Router路由和Vuex状态管理的使用

---

router

• 也是按需引入的形式构建router实例，就连路由模式也是按需引入的方法来创建的模式对象
• 没有 Vue.use(Vuex) 的形式进行挂载了

传送门【vue3学习系列】Router路由和Vuex状态管理的使用