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 的示例：

1. 在 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--;}
};

2. 在非组件的 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;
}

可以使用 sharedData 对象在不同的模块中读取和修改共享数据。

需要注意的是，Vue.observable 创建的对象是可观察的，但它并不具备 Vue 组件实例的其他功能，如生命周期、计算属性等。因此，在使用 Vue.observable 创建的对象时，需要手动进行状态管理和触发响应更新。

而对于一般的组件使用，data 选项仍然是首选的方式，因为它提供了更多的功能和便利性，比如自动的响应式、计算属性、对属性值进行校验等。只有在需要全局共享的数据或在非组件模块中使用响应式对象的情况下，才需要考虑使用 Vue.observable。

这篇关于Vue.observable的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---