如何在Vue3插件中创建支持setter的全局响应式计算属性

你的写法失效是两个核心逻辑导致的：

• computed() 返回的是ref包装对象，直接挂载到globalProperties上时，$foo是存储ref引用的普通原型属性，没有自定义setter。根据JS原型链规则，直接给实例的this.$foo赋值会在当前组件实例上创建同名自有属性，直接屏蔽原型上的ref对象，不会触发computed的setter。
• 组件内部声明的计算属性会被Vue的实例代理层做特殊校验，覆写只读计算属性会抛出警告，但globalProperties上的属性是挂载到应用全局原型上的，没有这套拦截逻辑，所以覆写时不会有警告。

方案1：仅适配选项式API调用 #

用Object.defineProperty直接在globalProperties上定义$foo的get/set拦截逻辑，内部用响应式变量存储值，完美支持this.$foo直接读写：

// 插件入口逻辑
import { ref } from 'vue'

export default {
  install(app) {
    // 内部私有响应式存储变量
    const internalFoo = ref('默认值')

    Object.defineProperty(app.config.globalProperties, '$foo', {
      get() {
        return internalFoo.value
      },
      set(newVal) {
        // 赋值时需要触发的自定义逻辑写在这里
        console.log('$foo 被更新为：', newVal)
        internalFoo.value = newVal
      },
      enumerable: false
    })
  }
}

这种方案下，组件内执行this.$foo = 'bar'会直接触发setter逻辑，所有组件访问的$foo都是全局同步的响应式值。

方案2：同时兼容组合式API调用 #

如果需要在无this的setup场景中使用，可搭配全局provide/inject实现跨场景通用：

// 插件入口逻辑
import { ref, computed, inject } from 'vue'
// 全局唯一注入key
const FOO_KEY = Symbol('global_foo')

// 可选：封装成组合式函数方便调用
export function useGlobalFoo() {
  return inject(FOO_KEY)
}

export default {
  install(app) {
    const internalFoo = ref('默认值')
    const fooComputed = computed({
      get: () => internalFoo.value,
      set: (newVal) => {
        // 自定义触发逻辑
        console.log('$foo 被更新为：', newVal)
        internalFoo.value = newVal
      }
    })

    // 全局注入，组合式API直接使用
    app.provide(FOO_KEY, fooComputed)

    // 同时挂载到全局属性，兼容选项式API
    Object.defineProperty(app.config.globalProperties, '$foo', {
      get: () => fooComputed.value,
      set: (val) => fooComputed.value = val,
      enumerable: false
    })
  }
}

// 组合式API中调用示例
// import { useGlobalFoo } from '你的插件路径'
// const $foo = useGlobalFoo()
// 读取：console.log($foo.value)
// 赋值：$foo.value = '新值' 自动触发setter

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