Vue 3中如何访问应用实例的data属性？迁移问题求助

核心变化：应用实例 vs 根组件实例 #

Vue 2 里，new Vue() 返回的是根组件实例，所以能直接从这个实例上获取 data 中的属性。但 Vue 3 中，createApp() 返回的是应用实例（App Instance），它负责管理全局配置（比如注册插件、指令、全局组件），并不持有组件的状态数据。真正包含 data 属性的是 app.mount() 方法返回的根组件实例。

修正你的代码 #

要正确访问 data 里的 results，需要保存 mount() 返回的根组件实例：

import { createApp } from 'vue/dist/vue.esm-bundler';
...

const app = createApp({
  data() {
    const results = ...;

    return {
      results,
      ...
    };
  },
  ...
});

// 保存根组件实例
const rootInstance = app.mount('app')

const { results } = rootInstance

console.log(results) // 现在能正常获取到值

最佳实践 #

1. 优先组件内部访问：如果是组件内的逻辑，选项式 API 里直接用 this.results，组合式 API 里用 ref/reactive 定义状态并直接访问，这是最符合 Vue 设计思路的方式。
2. 谨慎外部访问根组件实例：只有确实需要从应用外部操作根组件状态时，才保存根组件实例。过度依赖这种方式会提升代码耦合度，不利于后续维护。
3. 全局状态用 Pinia：如果需要在多组件间共享状态，或者从外部操作全局数据，推荐使用 Vue 官方状态管理库 Pinia。它能更规范地管理全局状态，避免直接操作根组件 data 带来的混乱。

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