网站中引用字体爱站网综合查询

Observable 翻译过来我们可以理解成可观察的

Vue.js2.6 新增

Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象 。

返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器

Vue.observable({ count : 1})
其作用等同于
new vue({ count : 1})

 在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，它和被返回的对象是同一个对象

在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的

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>

原理分析

源码位置：src\core\observer\index.js

export function observe (value: any, asRootData: ?boolean): Observer | void {if (!isObject(value) || value instanceof VNode) {return}let ob: Observer | void// 判断是否存在__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) {// 实例化Observer响应式对象ob = new Observer(value)}if (asRootData && ob) {ob.vmCount++}return ob
}

Observer类

export class Observer {value: any;dep: Dep;vmCount: number; // number of vms that have this object as root $dataconstructor (value: any) {this.value = valuethis.dep = new Dep()this.vmCount = 0def(value, '__ob__', this)if (Array.isArray(value)) {if (hasProto) {protoAugment(value, arrayMethods)} else {copyAugment(value, arrayMethods, arrayKeys)}this.observeArray(value)} else {// 实例化对象是一个对象，进入walk方法this.walk(value)}
}

walk函数

walk (obj: Object) {const keys = Object.keys(obj)// 遍历key，通过defineReactive创建响应式对象for (let i = 0; i < keys.length; i++) {defineReactive(obj, keys[i])}
}

defineReactive方法

export function defineReactive (obj: Object,key: string,val: any,customSetter?: ?Function,shallow?: boolean
) {const dep = new Dep()const property = Object.getOwnPropertyDescriptor(obj, key)if (property && property.configurable === false) {return}// cater for pre-defined getter/settersconst getter = property && property.getconst setter = property && property.setif ((!getter || setter) && arguments.length === 2) {val = obj[key]}let childOb = !shallow && observe(val)// 接下来调用Object.defineProperty()给对象定义响应式属性Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {const value = getter ? getter.call(obj) : valif (Dep.target) {dep.depend()if (childOb) {childOb.dep.depend()if (Array.isArray(value)) {dependArray(value)}}}return value},set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val/* eslint-disable no-self-compare */if (newVal === value || (newVal !== newVal && value !== value)) {return}/* eslint-enable no-self-compare */if (process.env.NODE_ENV !== 'production' && customSetter) {customSetter()}// #7981: for accessor properties without setterif (getter && !setter) returnif (setter) {setter.call(obj, newVal)} else {val = newVal}childOb = !shallow && observe(newVal)// 对观察者watchers进行通知,state就成了全局响应式对象dep.notify()}})
}