Vue3 Options API如何在外部JS方法访问并修改data中的foo？

方案一：传递修改函数给外部工具函数 #

这是最直接且符合Vue设计思想的方式，通过将组件内修改foo的方法传递给外部函数，让外部函数调用该方法更新响应式变量，完全遵循响应式机制。

组件代码：

import { visualization } from "../util/Visualization"

export default {
  data: () => ({
    foo: ''
  }),
  mounted() {
    // 传入修改foo的方法到外部函数
    visualization({
      updateFoo: (newValue) => {
        this.foo = newValue
      }
    })
  }
}

util/Visualization.js代码：

export function visualization(options) {
  // 模拟业务逻辑，需要更新foo时调用传入的方法
  setTimeout(() => {
    options.updateFoo('来自外部工具的更新内容')
  }, 1000)
}

方案二：使用Provide/Inject（适合跨层级或复杂场景） #

如果外部工具函数需要在多个组件或深层场景下访问修改foo，可以用Vue的provide/inject机制，将foo的状态和修改方法注入到外部函数中。

组件代码：

import { visualization } from "../util/Visualization"

export default {
  data: () => ({
    foo: ''
  }),
  // 提供foo的状态和修改方法
  provide() {
    return {
      fooState: {
        // 用getter获取最新的foo值
        get foo() { return this.foo },
        updateFoo: (newValue) => {
          this.foo = newValue
        }
      }
    }
  },
  mounted() {
    visualization()
  }
}

util/Visualization.js代码：

import { inject } from 'vue'

export function visualization() {
  const fooState = inject('fooState')
  // 调用注入的方法更新foo
  setTimeout(() => {
    fooState.updateFoo('通过Provide/Inject更新的内容')
  }, 1000)
}

注意事项 #

• 绝对不要用getElementById直接操作DOM元素修改内容，这会绕过Vue的响应式系统，导致数据foo和视图内容不一致，破坏组件的状态管理逻辑。
• 优先选择方案一，它逻辑简单、耦合度低，最符合Vue的响应式设计原则。

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