什么是observable

Vue.observable是Vue.js 2.6引入的新特性，它是一种可观察的数据类型，用于在Vue组件之间共享状态。在Vue 2.x中，如果要在组件之间共享状态，通常需要使用Vue实例中的data属性或Vuex状态管理库。而使用Vue.observable，您可以创建可观察的数据对象，将其放入全局范围内，并在需要的组件中访问它。

为什么要使用observable

Vue.observable是基于ES6的Proxy API实现的，可以监视对象的读取和写入操作，并在相应的操作发生时通知Vue.js更新相关组件。由于Vue.observable是基于原生JavaScript实现的，所以在性能和兼容性方面都比Vue实例和Vuex更优秀。

使用场景及方式

Vue.observable适用于模块不是很多，功能不是很复杂的情况下使用。

下面是个简单计数器的实现:

// store.js
import { observable } from 'vue';

export const store = observable({
  count: 0,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
});

在Vue 2中，手动绑定值和同步方法。

// Vue 2.x实现

// main.js中全局注入
import { createApp } from 'vue';
import { store } from './store';
import App from './App.vue';

const app = createApp(App);
app.config.globalProperties.$store = store;


// 组件中注入
import { store } from './store';

// 在子组件中将store的值绑定到计算属性上, 方法绑定到methods上
export default {
  computed: {
    count() {
      return srore.count
    }
  },
  methods: {
    increase: store.increase,
    decrease: store.decrease
  }
}

在Vue 3中，可以通过provide/inject或setup函数中的inject来注入store对象到组件中。

// Vue 3.x实现

// 在父级组件中使用`provide`方法，将`store`对象注入到组件树中
import { createApp } from 'vue';
import { store } from './store';

const app = createApp({ /* App组件 */ });
app.provide('store', store);
app.mount('#app');

// 在子组件中使用`inject`方法，从父级组件中注入`store`对象
import { inject } from 'vue';

export default {
  setup() {
    const store = inject('store');

    // 在组件中可以直接使用store对象了
    // 例如：store.count、store.increment()、store.decrement()
  }
}

参考文档

observable源码地址