面试官：Vue.observable你有了解过吗？说说看你的理解。。。

说到Vue.observable，这个问题其实在Vue 2和Vue 3中都有一定的不同。最近在面试中看到一位面试官问候选人：“你对Vue.observable了解多少？能说说看吗？”

这个问题其实考察的内容不少，包括Vue响应式机制、状态管理技巧，甚至还有跨组件通信的理解。那么，接下来我就深入聊聊Vue.observable的应用和实现原理，顺便也帮大家梳理一下这个概念。

在Vue中，observable字面上是“可观察的”意思。我们可以理解为：用Vue.observable把一个普通对象变成响应式对象，从而触发视图的更新。在Vue 2中，它允许我们创建一个响应式对象，用于跨组件间的状态共享，比如不用vuex，也能让一些简单的状态在多个组件间同步。假设我们有这样一个状态对象：

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

在这个例子中，state就是一个响应式对象，我们可以直接在组件中引用它。因为是响应式的，所以对count的修改会触发依赖更新，类似于Vue实例中的data属性。我们来看看它的用法：

<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { state } from './store.js'  // 假设状态放在一个独立的文件里
export default {
  computed: {
    count() {
      return state.count
    }
  },
  methods: {
    increment() {
      state.count++
    }
  }
}
</script>

通过这样简单的设置，我们在任何需要同步这个count值的组件中，都可以直接访问state.count，实现跨组件的数据共享。用这个小技巧，避开了父子组件复杂的传值，也避免了过于笨重的状态管理工具，比如Vuex，非常适合简单的场景。

如果你对Vue的响应式机制有些了解，可能会知道Vue的响应式是通过Object.defineProperty()实现的，这也是Vue.observable的核心。它的实现逻辑在src/core/observer/index.js中，通过observe函数来决定是否将对象转化为响应式对象。我们来看看核心代码片段：

export function observe (value, asRootData = false) {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (shouldObserve && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

这段代码通过检查对象类型和条件来决定是否进行响应式转换，最后通过Observer类将对象转化为响应式数据。

接下来看看Observer类的关键实现：

export class Observer {
  constructor (value) {
    this.value = value
    this.dep = new Dep()  // 用于依赖管理
    def(value, '__ob__', this)  // 定义不可枚举的__ob__属性，标识该对象为响应式
    if (Array.isArray(value)) {
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }
  
  walk (obj) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
}

在Observer类中，我们通过walk方法遍历对象的每个属性，用defineReactive定义响应式属性，而这个方法才是真正实现响应式的关键：

export function defineReactive (obj, key, val) {
  const dep = new Dep()

  let childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      if (Dep.target) {
        dep.depend()
      }
      return val
    },
    set: function reactiveSetter (newVal) {
      if (newVal === val) return
      val = newVal
      childOb = observe(newVal)
      dep.notify()
    }
  })
}

这个代码的核心在于Object.defineProperty的get和set方法。在get时，记录依赖（即哪个组件依赖这个数据），而在set时，通过dep.notify()通知依赖的组件进行更新。这样，当Vue.observable创建的响应式对象属性发生变化时，会自动触发依赖更新，刷新相关视图。

在Vue 3中，Vue.observable被reactive取代，reactive不仅更高效，还引入了Proxy。使用Proxy的好处是它能监听更细粒度的操作，比如新增或删除属性，而不需要像defineProperty那样逐个属性绑定。Vue 3的响应式实现更为灵活，性能也有显著提升，减少了Vue 2中存在的一些限制。

在Vue应用中，observable非常适合在简单的场景下用于跨组件通信。比如，我们需要一个全局状态对象，但不想引入Vuex这种相对“重量级”的状态管理工具。使用observable能快速实现这样的需求，而且代码量少，逻辑清晰。

比如，我们在项目中经常会有一个共享的状态对象来保存当前用户的信息：

// userState.js
import Vue from 'vue'

export const userState = Vue.observable({
  name: '游客',
  age: 25
})

export const userActions = {
  updateName(newName) {
    userState.name = newName
  },
  updateAge(newAge) {
    userState.age = newAge
  }
}

然后在任何需要的组件中，我们可以直接使用userState中的数据或userActions中的方法进行状态更新。这就轻松实现了组件间的状态同步：

<template>
  <div>
    用户名：{{ userName }}
    <button @click="changeName('新用户')">修改用户名</button>
  </div>
</template>

<script>
import { userState, userActions } from '@/userState.js'

export default {
  computed: {
    userName() {
      return userState.name
    }
  },
  methods: {
    changeName(newName) {
      userActions.updateName(newName)
    }
  }
}
</script>

所以，如果面试官问你“Vue.observable你有了解过吗？说说看”，可以这样组织：

Vue.observable是Vue 2中的一个API，用于创建响应式对象。它可以使一个普通对象变成响应式的，从而实现数据更新时自动触发视图更新。observable非常适合在简单的跨组件通信场景中使用，无需借助Vuex等全局状态管理工具，比如在多个组件间共享简单的状态时，可以直接将状态对象变成响应式。Vue 3中这个功能被reactive替代，使用了Proxy实现更灵活的响应式系统。

在实现上，Vue.observable底层依赖Object.defineProperty的get和set，为对象的每个属性添加响应式特性，这样在读取属性时会进行依赖收集，而在属性更新时通过dep.notify()来通知依赖更新。此外，Vue.observable的实现相对轻量，适用于简单场景，不会像Vuex那样有额外的状态管理配置负担。