Vue3组件中无法访问window对象及全局属性问题排查

1. 组件使用<script setup>语法导致this不存在 #

如果你的组件用的是<script setup>语法糖，这个环境里没有this上下文，直接用this.$xxx自然返回undefined。解决方式有两种：

• 直接使用全局的window（本来就没必要挂载到Vue全局属性）：

  // 直接调用window.getSelection获取选中文本
  const getSelectedText = () => {
    const selected = window.getSelection().toString()
    console.log(selected)
  }
  

• 通过getCurrentInstance获取自定义全局属性：

  import { getCurrentInstance } from 'vue'
  
  const instance = getCurrentInstance()
  if (instance) {
    console.log(instance.appContext.config.globalProperties.$stupidProp)
  }
  

2. 全局属性挂载顺序错误 #

确保你是在app.mount()之前挂载全局属性，否则组件初始化时还未注入这些属性：

// app.js 正确顺序
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 先挂载全局属性
app.config.globalProperties.$window = window
app.config.globalProperties.$stupidProp = '自定义值'
// 再挂载应用实例
app.mount('#app')

如果先执行app.mount()再挂载属性，组件已经初始化完成，自然拿不到后续挂载的全局属性。

3. this指向错误（选项式API场景） #

如果用的是选项式API（非setup），要确保在组件的钩子函数（如mounted）或methods里访问this，避免在普通函数中使用（此时this不指向组件实例）：

// 选项式API正确写法
export default {
  mounted() {
    console.log(this.$stupidProp)
    console.log(this.$window.getSelection())
  },
  methods: {
    getSelectedText() {
      console.log(window.getSelection().toString())
    }
  }
}

额外提示：获取选中文本无需挂载window #

window是浏览器全局对象，直接在组件中使用即可，完全没必要通过app.config.globalProperties挂载，多此一举。直接调用window.getSelection()就能实现需求。

内容的提问来源于stack exchange，提问作者flori10