面试题：什么是 Vue 的 observable？

在 Vue 中，Vue.observable 是一个用于创建响应式对象的 API。它可以将一个普通 JavaScript 对象转换为响应式对象，使得对象的属性变化能够触发视图更新。Vue.observable 是 Vue 2.6 引入的特性，主要用于简化小型状态管理。

1. 基本用法

Vue.observable 接收一个普通对象，并返回一个响应式对象。返回的对象可以直接在 Vue 组件中使用，其属性变化会自动触发视图更新。

import Vue from 'vue';

// 创建一个响应式对象
const state = Vue.observable({
  count: 0,
});

// 在组件中使用
export default {
  render() {
    return (
      <div>
        <p>{state.count}</p>
        <button onClick={() => state.count++}>Increment</button>
      </div>
    );
  },
};

2. 特点

响应式：
- Vue.observable 返回的对象是响应式的，其属性变化会触发视图更新。
轻量级：
- 适合小型状态管理，不需要引入 Vuex 等状态管理库。
简单易用：
- 只需要调用 Vue.observable 即可创建响应式对象。

3. 与 Vuex 的区别

Vuex：
- Vuex 是 Vue 官方推荐的状态管理库，适合中大型项目。
- 提供了模块化、插件、严格模式等高级特性。
Vue.observable：
- 适合小型项目或简单的状态管理需求。
- 功能较为简单，没有 Vuex 的强大功能。

4. 使用场景

小型状态管理：
- 当项目状态较少且简单时，可以使用 Vue.observable 替代 Vuex。
组件间共享状态：
- 在多个组件之间共享状态时，可以使用 Vue.observable 创建一个全局响应式对象。

5. 示例：全局状态管理

import Vue from 'vue';

// 创建一个全局响应式对象
const state = Vue.observable({
  count: 0,
});

// 在组件 A 中使用
export default {
  render() {
    return (
      <div>
        <p>{state.count}</p>
        <button onClick={() => state.count++}>Increment</button>
      </div>
    );
  },
};

// 在组件 B 中使用
export default {
  render() {
    return (
      <div>
        <p>{state.count}</p>
        <button onClick={() => state.count--}>Decrement</button>
      </div>
    );
  },
};