Vue.observable( object )

2.6.0 新增

  • 参数：

    • {Object} object
  • 用法：

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

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

  1. const state = Vue.observable({ count: 0 })
  3. const Demo = {
  4.   render(h) {
  5.     return h('button', {
  6.       on: { click: () => { state.count++ }}
  7.     }, `count is: ${state.count}`)
  8.   }
  9. }

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