Vue 3挂载后如何在按钮点击时向根实例或组件添加响应式数据？

完全可以在原生JS中操作已挂载Vue实例的响应式数据，只需要提前保留Vue实例的全局可访问引用即可，具体操作步骤如下：

1. 保存Vue实例引用 #

调用createApp创建应用并挂载后，把返回的实例挂载到全局window对象上，原生JS就能直接访问到：

// Vue3 示例
import { createApp, reactive } from 'vue'

const app = createApp({
  setup() {
    // 声明响应式数组/对象
    const dataList = reactive([
      {id: 1, content: '初始数据1'},
      {id: 2, content: '初始数据2'}
    ])
    // 预留的可扩展响应式容器，后续新增属性直接放这里即可
    const extraData = reactive({})

    return {
      dataList,
      extraData
    }
  }
})

// 挂载应用，得到根组件实例
const vm = app.mount('#app')
// 挂载到window，全局可访问
window.vueRoot = vm

2. 原生JS中操作响应式数据 #

直接通过window.vueRoot访问暴露的响应式属性，修改后Vue的响应式系统会自动触发视图更新，不需要额外调用方法：

// 纯原生JS代码，可写在任意非Vue的脚本逻辑里
document.getElementById('addBtn').addEventListener('click', () => {
  // 往响应式数组插入数据，视图会自动更新
  window.vueRoot.dataList.push({
    id: Date.now(),
    content: '原生JS新增的响应式数据'
  })

  // 给响应式对象新增属性，Vue3默认支持响应式
  window.vueRoot.extraData.newKey = '新增的根级响应式属性'
})

• 只有组件setup中return暴露，或是选项式APIdata中声明的属性才能被外部访问，未暴露的私有属性无法操作
• 不要直接给根实例新增未提前声明的普通属性，这类属性不会有响应式；如果需要新增响应式属性，提前在组件内声明一个空的reactive容器，后续往容器里加属性即可
• 如果使用Vue2，逻辑基本一致，仅新增对象属性时需要调用Vue.set(目标对象, 属性名, 属性值)才能触发响应式，数组用原生push/splice等方法可直接触发响应式

内容的提问来源于stack exchange，提问作者Lawrence J.