Vue.observable( object )
New in 2.6.0+
Arguments:
{Object} object
Usage:
Make an object reactive. Internally, Vue uses this on the object returned by the data function.
The returned object can be used directly inside render functions and computed properties, and will trigger appropriate updates when mutated. It can also be used as a minimal, cross-component state store for simple scenarios:
const state = Vue.observable({ count: 0 })
const Demo = {
render(h) {
return h('button', {
on: { click: () => { state.count++ }}
}, `count is: ${state.count}`)
}
}
In Vue 2.x, Vue.observable directly mutates the object passed to it, so that it is equivalent to the object returned, as demonstrated here. In Vue 3.x, a reactive proxy will be returned instead, leaving the original object non-reactive if mutated directly. Therefore, for future compatibility, we recommend always working with the object returned by Vue.observable, rather than the object originally passed to it.
See also: Reactivity in Depth
