怎样设计异步接口（被动接收数据）的 Vue.js 应用的数据处理层？

Question

正在做一个基于 Vue.js 和 C++ 的 Windows 应用，Vue 负责界面和逻辑，C++ 只负责提供数据接口，C++ 会通过 .dll 文件将 API 挂载在 window 对象上，以供 js 调用。

js 调用 API 的过程大概是：

window.api.action('someAction', args, id, function (status, data, id) {

  // callback

  // 处理 data 数据

  // 传参的 id 和 callback 里返回的 id 一致，用来标识请求返回的结果

});

但是 callback 函数里的逻辑只是注册在 C++ 层，所以这里跟常见的回调函数不同：

初始化 API 之后，即可监听 C++ 主动传过来的数据，即 js 层被动执行 callback 里的逻辑；

循环调用时 callback 会被覆盖，比如遍历调用时，必须传入特定 id 标识返回的结果，在callback 里调用处理，否则结果会被最后一个覆盖。

因为 C++ 层需要有能够主动向 Web 层发送数据的权力，所以面临的问题是：怎样在 Vue 里面封装 API 这部分，才能方便的将接收的数据传递给特定的组件呢？

Answer 1

长连接,推送Socket -> WebSocket