vue observable 的使用

observable，译为可观察的

在 Vue 中可以使用 Vue.observable() 进行状态管理（监控属性），observable 可以让一个对象变成响应式数据，Vue 内部使用它来处理 data() 中返回的对象，达到双向绑定的效果（响应式）。

即，Observer 是一个监听器，它对所有数据属性进行监听（给属性都加上setter、getter）

• Vue 是基于 MVVM 模型的（Model 数据层、View 视图层、ViewModel 业务逻辑层，负责关联数据和视图）
• 使用数据劫持 + 发布者订阅者模式，劫持各个属性的 setter、getter，在数据变化时发布消息给订阅者，触发相应的监听回调。（Vue2 使用 Object.defineProperty，Vue3 使用 Proxy）
• 进入 Vue 页面后，New vue() 初始化的时候，会对 data 进行响应化处理，这个过程就发生在 Observer （每个 key 都会有一个对应的 dep 实例来存储 watcher 实例数组，Watcher：Observer 和 Compiler 之间的桥梁）

observable 实现数据共享

多组件之间经常需要进行状态的共享，也许可以想到使用 Vuex 或是 Pinia 来进行共享数据的管理，

但是如果开发的应用比较简单，官方也建议最好不要使用 Vuex，一个简单的 store 模式即可满足。

比如如下场景：两个非父子关系的页面进行数据交互：

第一步：新建 store.js 文件

import Vue from "vue"
export const state = Vue.observable({
    number: 0
})

第二步：在文件1中引入 store.js，computed 中添加一个计算属性，将 observable 管理的数据作为返回值，修改页面1中变量的值，在页面2观察数据的变化

页面1

<script>
import { state } from "./store.js";
export default {
  data() {
    return {};
  },
  computed: {
    number() {
      return state.number;
    },
  },
  mounted(){
      this.changeData()
  },
  methods: {
    changeData() {
      state.number++;
    },
  },
};

页面2：与页面1 相同的引入方法，修改页面2 的值，页面1的值也会发生变化。