Vue.observable

本文主要是介绍Vue.observable，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

让一个对象可响应。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 返回的对象，而不是传入源对象。
Vue.observable 方法是 Vue 2.6.0 新增的全局方法，用于创建一个可观察的数据对象。它可以在 Vue 组件中用于声明响应式数据，类似于 data 选项，但可以在组件范围外使用。

下面是一些情况下使用 Vue.observable 的示例：

在 Vuex Store 中使用：Vue.observable 可以创建一个响应式的状态管理对象，将其用作 Vuex Store 中的状态。这样，可以在多个组件间共享该状态。

import Vue from 'vue';
export const store = Vue.observable({count: 0
});
export const mutations = {increment() {store.count++;},decrement() {store.count--;}
};

在非组件的 JavaScript 模块中使用：Vue.observable 可以用于创建一个响应式的对象，用于存储全局的共享数据，并在不同的模块中进行读写操作。

import Vue from 'vue';
export const sharedData = Vue.observable({username: '',isLoggedIn: false
});
export function setUser(username) {sharedData.username = username;sharedData.isLoggedIn = true;
}