Vue3全局属性在mounted或computed中不可见问题排查

问题场景 #

在main.js中配置了全局属性：

app.config.globalProperties.$backendUrl = "https://myhost:8989";

但组件中调用时出现差异：

methods: {
  save() {
    console.log(this.$backendUrl); // 输出正确结果
  }
},

mounted() {
  console.log(this.$backendUrl); // 输出undefined
},

computed: {
  treeData(){
    console.log(this.$backendUrl); // 输出undefined
  }
}

原因分析 #

• 应用初始化顺序错误：如果app.config.globalProperties的配置代码写在了app.mount('#app')之后，组件实例已经提前创建完成，全局属性无法回溯注入到已创建的组件实例原型链中。而methods里的方法是触发时才执行，此时全局属性已经挂载，所以能正常访问。
• 组件语法环境差异：如果组件使用了<script setup>语法糖，this的指向和传统Options API不同，globalProperties不会自动注入到setup上下文，直接用this访问会出现undefined。

解决办法 #

1. 调整全局属性配置顺序
   确保全局属性配置在应用挂载之前执行，修改main.js：

const app = createApp(App);
// 先配置全局属性
app.config.globalProperties.$backendUrl = "https://myhost:8989";
// 再挂载应用
app.mount('#app');

2. 适配