vue3 如何加prototype。vue3使用globalProperties

在2.X版本中创建一个vue 实例是通过 new Vue()来实现的，到了3.X中则是通过使用createApp这个 API返回一个应用实例，并且可以通过链条的方式继续调用其他的方法。

在vue2.x中，我们想设置全局变量，可以在main文件中用prototype绑定vue实列，在vue3.0中，可以用app.config.globalProperties来代替prototype，具体用法如下。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$axios = axios // 自定义添加
const vm = app.mount('#app')

这样就可以使用了

...
<script>
export default {
  name: 'App',
  methods: {...},
  mounted() {
    console.log(this.$axios)
  }
}
</script>

绑定一个字符串

在 vue2 中绑定

Vue.prototype.$dzm = 'dj-test'

在 vue3 中绑定

// 初始化相关
import { createApp } from 'vue'
import { nextTick } from "@vue/runtime-core"
import App from './App.vue'
import router from './router'
import store from './store'
// 创建对象
const app = createApp(App)
// 必须使用 nextTick，不然会有加载顺序问题，导致绑定失败
nextTick(() => {
  // 代替 Vue.prototype.$xxx 绑定
  app.config.globalProperties.$dzm = 'dj-test'
})
// 使用并挂载
app.use(store).use(router).mount('#app')
// 导出
export default app

js中使用

<script>
import { getCurrentInstance } from 'vue'
export default {
  setup () {
    const { proxy } = getCurrentInstance()
    console.log(proxy.$dzm)
  }
}
</script>

模版中使用

<span>{{ $dzm }}</span>