开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情
observable 这个单词本身的含义是可观察的，在 Vue 中，如果提到 observable 这个概念脑海中就会联系到数据的响应式，以及观察者和监听者模式。
在 Vue 2 中需要使用 Object.defineProperty 来实现数据的响应式，其中 defineProperty 表示的是：数据劫持 + 发布者-订阅者 模式，通过劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
到了 Vue3 不再使用 Object.defineProperty 来实现数据响应式，而是用 Proxy 来实现响应式（Proxy 会返回一个可响应的代理）。具体·细节前文有介绍，可参考：Vue中Proxy与Object.defineProperty的原理。
Vue.observable
Vue 2 为我们提供了一个让对象可响应的方法：Vue.observable。observable 的核心是监控，Vue 内部会用它来处理 data 函数返回的对象。可以将其理解为一个小型的 vuex ，组件之间状态共享。
如何去理解 observable ？首先，Vue.observable({number:1})这段代码，等同于new Vue({number:1})。
其次，在非父子组件通信的时候，可以使用vuex 或者数据总线等 ，observable 也可以是一个很好的解决方案
关于 Vue.observable 的官方介绍可参考：
使用方法
- 建立一个新文件，并引入 vue
- 创建一个 state 对象，使用 Vue.observable 指令来声明需要可响应的 state 对象
- 声明对应的方法,如下面代码中的 setName、say 等
- 在使用的页面中，直接引用函数并传递参数即可
import Vue from 'vue'
export let state = Vue.observable({
name: 'test111',
msg: '好好学习 天天向上'
})
export let mutations = {
setName(name) { state.name = name },
say(info) { state.msg = info }
}
使用页面：
import {state,mutations} from 'myStore.js'
<button @click="say('hello')">
methods: {
setName: mutations.setName,
say:mutations.msg
}
