vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法
在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了globalProperties
代码语言：javascript复制import { createApp } from 'vue'
import App from './App'
import router from '@router/index'
const app = createApp(App).app.use(router).mount('#app')
app.config.globalProperties.$demoe = 'demo'注意：千万不能这样子写：
代码语言：javascript复制createApp(App).config.globalProperties.$httpUrl = 'https://www.baidu.com'
createApp(App).use(router)
.use(store)
.use(elementPlusUI)
.mount('#app')
//或者是这样
const app = createApp(App)
createApp(App).config.globalProperties.$httpUrl = 'https://www.baidu.com'
app.use(router)
.use(store)
.use(elementPlusUI)
.mount('#app')第一种相当于我们直接调用了两次createApp(App)，
最后调的那次里面压根就没有我们需要配置的全局变量，会返回undefined
在 compose api 如何用？
只需要从vue引入一个方法即可，不能在页面中使用this获取
代码语言：javascript复制import { defineComponent, getCurrentInstance, onMounted } from "vue"
export default defineComponent({
setup (props, {emit}) {
// console.log(this)
const { appContext : { config: { globalProperties } },proxy} = getCurrentInstance()
const { ctx, proxy } = getCurrentInstance()
console.log(globalProperties.$demo)
return {
proxy
}
}
})ctx和proxy都可以访问到定义的全局方法，但是ctx只能在本地使用，线上环境使用proxy
不管怎么样，在vue3项目，个人不推荐关在全局变量与属性。
参考文章：
vue3创建全局属性和方法 https://segmentfault.com/a/1190000040224048
vue3中挂载全局变量 https://blog.csdn.net/weixin_43090018/article/details/117222606
转载本站文章《vue2升级vue3：vue3创建全局属性和方法》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8861.html
