面试官：说说对observable的理解

迷南。 2022-12-28 12:36 142阅读 0赞

![format_png][]

## 一、Observable 是什么 ##

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

我们先来看一下其在`Vue`中的定义

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

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

Vue.observable({ count : 1})

其作用等同于

new vue({ count : 1})

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

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

## 二、使用场景 ##

在非父子组件通信时，可以使用通常的`bus`或者使用`vuex`，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，`observable`就是一个很好的选择

创建一个`js`文件

// 引入vue
    import Vue from 'vue
    // 创建state对象，使用observable让state对象可响应
    export let state = Vue.observable({
      name: '张三',
      'age': 38
    })
    // 创建对应的方法
    export let mutations = {
      changeName(name) {
        state.name = name
      },
      setAge(age) {
        state.age = age
      }
    }

在`.vue`文件中直接使用即可

<template>
      <div>
        姓名：{
        { name }}
        年龄：{
        { age }}
        <button @click="changeName('李四')">改变姓名</button>
        <button @click="setAge(18)">改变年龄</button>
      </div>
    </template>
    import { state, mutations } from '@/store
    export default {
      // 在计算属性中拿到值
      computed: {
        name() {
          return state.name
        },
        age() {
          return state.age
        }
      },
      // 调用mutations里面的方法，更新数据
      methods: {
        changeName: mutations.changeName,
        setAge: mutations.setAge
      }
    }

## 三、原理分析 ##

源码位置：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 $data
    
        constructor (value: any) {
            this.value = value
            this.dep = new Dep()
            this.vmCount = 0
            def(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/setters
      const getter = property && property.get
      const setter = property && property.set
      if ((!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) : val
          if (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 setter
          if (getter && !setter) return
          if (setter) {
            setter.call(obj, newVal)
          } else {
            val = newVal
          }
          childOb = !shallow && observe(newVal)
          // 对观察者watchers进行通知,state就成了全局响应式对象
          dep.notify()
        }
      })
    }

## 参考文献 ##

*  https://blog.csdn.net/qq\_32682301/article/details/105419673
 *  https://wbbyouzi.com/archives/343
 *  https://vue3js.cn/docs/zh

面试官VUE系列总进度：16／33

[面试官：SPA（单页应用）首屏加载速度慢怎么解决？][SPA]

[面试官：Vue中组件和插件有什么区别？][Vue]

[面试官：为什么data属性是一个函数而不是一个对象？][data]

[面试官：Vue中给对象添加新属性界面不刷新?][Vue 1]

[面试官：Vue实例挂载的过程中发生了什么?][Vue 2]

[面试官：Vue中的$nextTick怎么理解?][Vue_nextTick]

[面试官：说说你对vue的mixin的理解，有哪些应用场景？][vue_mixin]

[面试官：说说你对slot的理解？slot使用场景有哪些？][slot_slot]

篇副有限，扫下方二维码查看往期

![format_png 1][]

[format_png]: /images/20221120/bff979d46def49db9707c87f7e8063f2.png
[SPA]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c122cb674834677de9dea791c9f956ad8c5121b007586c25fb11bc07910f47a6ffb99176&idx=1&mid=2247484276&scene=21&sn=7a980dd7db86f0194b802b815913cff2#wechat_redirect
[Vue]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1d2cb6748c4a2d60835488346cf74848078a9b488e4e84d1be0dcfc1ccce3a4bc958209&idx=1&mid=2247484292&scene=21&sn=76ff2903942ce748b58e9339997b7969#wechat_redirect
[data]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1c1cb6748d71afec432e36448c4e1febe37c4f9f43e566ebb613ea680ab2a7e863f7880&idx=1&mid=2247484311&scene=21&sn=970d4a092c5dc09c5d427ce2efad8bea#wechat_redirect
[Vue 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1f5cb6748e39b862cb3f3327676a4502c2f2f658a28cf949a5f19bae62ea347559d23fb&idx=1&mid=2247484323&scene=21&sn=c2b5b9dd96fe17e62d9facc95cd1b534#wechat_redirect
[Vue 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1e5cb6748f3511e98045534c4631c86b13c5f2f6de0290ba7b992913127070090a02e7b&idx=1&mid=2247484339&scene=21&sn=4ce6450e946dc44230ab99934396db10#wechat_redirect
[Vue_nextTick]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c19ecb674888b80b27c2b7e8bde37c81150ba417613037d7811ffd1cdd33610f63686892&idx=1&mid=2247484360&scene=21&sn=d505ec934b88d7108cac139b3b047024#wechat_redirect
[vue_mixin]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c18dcb67489bcc89f4ba25b2ac35fd6e589b8ab40e2118ba043554ad2cc4053ab2dd3b92&idx=1&mid=2247484379&scene=21&sn=d50794bbaa957339a92b7e4b58acd5e8#wechat_redirect
[slot_slot]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c1a7cb6748b1b4b1df7782e30301e55b9d4d5331e4b39124cdc869d47db5a28d5194b162&idx=1&mid=2247484401&scene=21&sn=ca97df335499c6b930ee2b5172524234#wechat_redirect
[format_png 1]: /images/20221120/aa158cd19ba74583848f786544760d79.png