Vue中observable是什么及怎么使用

這篇文章主要介紹“Vue中observable是什么及怎么使用”，在日常操作中，相信很多人在Vue中observable是什么及怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue中observable是什么及怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、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()
    }
  })
}

到此，關于“Vue中observable是什么及怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！