Vue 3中如何在setup()函数内访问data选项中定义的属性

• Vue 3 的setup() 函数执行时机早于组件实例初始化完成，函数内部的this 不指向当前组件实例，所以无法通过this访问到选项式API中data()定义的属性。
• 另外不建议自定义属性使用$作为开头命名，该前缀是Vue内部保留的命名空间，容易出现命名冲突。

方案1：通过getCurrentInstance获取组件实例（仅推荐旧代码兼容场景使用） #

如果确实需要在setup中访问选项式API定义的属性，可以调用Vue暴露的getCurrentInstance方法获取当前组件实例：

import { getCurrentInstance } from 'vue'

export default {
  data() {
    return {
      $localStorage: {}
    }
  },
  setup() {
    const instance = getCurrentInstance()
    // 访问data属性，注意要取proxy下的属性
    const localStorage = instance.proxy.$localStorage
    // 后续业务逻辑
  }
}

注意：getCurrentInstance属于高阶API，仅适用于应急兼容旧代码的场景，不推荐作为常规用法使用。

方案2：将属性定义迁移到setup内（推荐） #

直接用组合式API的ref/reactive在setup内定义你需要的存储对象，完全避免跨API访问的问题：

import { reactive } from 'vue'

export default {
  setup() {
    const localStorage = reactive({})
    // 直接在setup内使用localStorage即可，需要暴露给模板的话return出去
    return {
      localStorage
    }
  }
}

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