Vue.observable你有了解过吗？说说看

Vue.observable是什么

官方是这么描述的

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

就是让一个对象变成响应式数据，感觉和vue3的reactive有点相似

使用场景

在组件间通信时，如果觉得状态管理并不复杂又不想用全局的$bus，可以用Vue.observable创建一个类似vuex的 “最小化的跨组件状态存储器”，多个组件共同访问和修改用Vue.observable赋予响应式的对象数据。

官方文档写的很全面了，如下：

• 参数：

  • {Object} object

• 用法：

  让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

  返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

  const state = Vue.observable({ count: 0 })
  
  const Demo = {
    render(h) {
      return h('button', {
        on: { click: () => { state.count++ }}
      }, `count is: ${state.count}`)
    }
  }
  

在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，所以如这里展示的，它和被返回的对象是同一个对象。在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 Vue.observable 返回的对象，而不是传入源对象。