Vue.observable 是什么

Observable 是什么

Vue.observable 是 Vue.js 提供的一个 API，它可以将一个普通的 JavaScript 对象转换为响应式对象。通过使用 Vue.observable，可以在任何地方创建一个响应式对象，而不仅仅是在 Vue 实例中使用。它在 Vue.js 的响应式系统中扮演了很重要的角色，可以用于管理状态、状态共享等场景。

Observable 作用

使用 Vue.observable 可以将一个普通对象转换为响应式对象，从而使其成为 Vue.js 的响应式系统的一部分。在转换之后，可以对该对象进行读取、修改等操作，并且在修改后，Vue.js 会自动进行重新渲染。

解决了什么问题

Vue.observable 的出现解决了在 Vue.js 中管理状态的问题。在 Vue.js 中，通过将状态保存在 Vue 实例的 data 属性中，可以实现状态管理，但是这种方式只能在 Vue 实例中使用，无法在其他地方使用。通过使用 Vue.observable，我们可以在任何地方创建一个响应式对象，从而更加灵活地管理状态。

适用场景

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择。

举个例子

// utils.js 文件
import Vue from 'vue'
// 创建响应式对象
export const state = Vue.observable({
  count: 1
})

export const mutations = Vue.observable({
  increase() {
    state.count++
  }
})

// 在 vue 文件中使用
<template>
  <div id="app">
    <button @click="increaseCount">+</button>
    {{ num }}
  </div>
</template>

<script>
import { state, mutations } from '@/utils/index'
export default {
  name: 'App',
  computed: {
    num() {
      return state.count
    }
  },
  methods: {
    increaseCount: mutations.increase
  }
}
</script>