Vue3如何从控制台/外部代码访问并修改实例数据？

核心思路：保留Vue实例的引用 #

用CDN引入Vue3时，必须把createApp创建的实例挂载后赋值给可访问的变量（比如全局变量），才能在实例外部直接操作data属性。

完整示例代码 #

<!-- HTML结构 -->
<div id="app">
  <p>当前key：{{ key }}</p>
  <p>问题：{{ question }}</p>
</div>

<!-- 引入Vue3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
// 创建并挂载实例，把实例赋值给全局变量vueApp
const vueApp = Vue.createApp({
  data() {
    return {
      key: '初始key',
      question: '这是初始问题'
    }
  }
}).mount('#app');

// 实例外部访问data属性
console.log(vueApp.key); // 输出：初始key
console.log(vueApp.question); // 输出：这是初始问题

// 直接赋值更新data，页面会自动响应式更新
vueApp.question = '更新后的问题';
</script>

AJAX更新数据示例 #

不管用原生fetch还是第三方库，只要在请求成功后直接给实例的属性赋值即可：

// 原生fetch示例
fetch('你的接口地址')
  .then(res => res.json())
  .then(data => {
    // 把接口返回的数据赋值给实例属性
    vueApp.key = data.newKey;
    vueApp.question = data.newQuestion;
  })
  .catch(err => console.error('请求失败:', err));

注意事项 #

• 如果操作嵌套对象属性，不要直接修改子属性（可能不触发响应式更新），建议直接替换整个对象：

  // 错误示例（嵌套属性可能无响应）
  vueApp.user.name = '新名字';
  // 正确方式
  vueApp.user = { ...vueApp.user, name: '新名字' };
  

• 确保vueApp实例变量处于你能访问到的作用域（不要放在局部函数内部）。

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