Seit der Ver?ffentlichung von Vue3 ist das Wort composition API in die Vision von Studenten eingedrungen, die Vue schreiben, und ich glaube Ihnen Ich habe es die ganze Zeit geh?rt. composition API ist jetzt aufgrund der Ver?ffentlichung von @vue/composition-apioptions API /code>-Plug-in, Vue2-Studenten k?nnen auch in den Bus einsteigen. Als n?chstes werden wir haupts?chlich responsive ref und reactive für eine gründliche Analyse verwenden wie dieses Plug-in diese Funktion implementiert. Vue3 發(fā)布之后，composition API 這個(gè)詞走入寫 Vue 同學(xué)的視野之中，相信大家也一直聽到 composition API 比之前的 options API 有多好多強(qiáng)，如今由于 @vue/composition-api 插件的發(fā)布，Vue2 的同學(xué)也可以上車咯，接下來我們主要以響應(yīng)式的 ref 和 reactive 來深入分析一下，這個(gè)插件是怎么實(shí)現(xiàn)此功能的。

如何使用

// 入口文件引入并注冊(cè)
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

// vue文件使用
import { defineComponent, ref, reactive } from '@vue/composition-api'

export default defineComponent({
  setup () {
     const foo = ref('foo');
     const obj = reactive({ bar: 'bar' });
     
     return {
        foo,
        obj
     }
  }
})

怎么樣，看完是不是感覺和 vue3 一模一樣，你可能會(huì)想：

• 這是 vue2 啊，我之前的 data 、methods 里面也有變量和方法，怎么做到跟 setup 返回值打通合并在一起的。【相關(guān)推薦：vuejs視頻教程、web前端開發(fā)】

• vue2 不是只有定義在 data 里面的數(shù)據(jù)才會(huì)被處理成響應(yīng)式的嗎？ ref 和 reactive 是怎么做到的呢？

• vue2 響應(yīng)式數(shù)據(jù)定義的約束（添加賦值原對(duì)象沒有的屬性，數(shù)組下標(biāo)修改等），改用 ref 和 reactive 就沒問題嗎？

當(dāng)然還有很多的疑惑，因?yàn)椴寮峁┑?API 相當(dāng)多，覆蓋了絕大部分 Vue3 所擁有的，這里主要從這幾個(gè)問題來分析一下是如何做到的。

原理解析

得益于 Vue 的插件系統(tǒng)，@vue/composition-api 像 vue-router 、vuex 一樣也是通過官方提供的插件式來注入。

// 這里只貼跟本章要講的相關(guān)代碼

funciton mixin (Vue) {
    Vue.mixin({
      beforeCreate: functionApiInit
   }
}

function install (Vue) {
    mixin(Vue);
}

export const Plugin = {
  install: (Vue: VueConstructor) => install(Vue),
}

Vue 插件就是向外面暴露一個(gè) install 的方法，當(dāng)調(diào)用 use 的時(shí)候會(huì)調(diào)用該方法，并把 Vue 構(gòu)造函數(shù)作為參數(shù)傳入，然后調(diào)用 Vue.mixin 混入對(duì)應(yīng)鉤子時(shí)要處理的函數(shù)。

接下來主要看下 functionApiInit 做了什么

function functionApiInit(this: ComponentInstance) {
  const vm = this
  const $options = vm.$options
  const { setup, render } = $options
  
  // render 相關(guān)
  
  
  const { data } = $options
  
  $options.data = function wrappedData() {
    initSetup(vm, vm.$props)
    return isFunction(data)
     ? (
        data as (this: ComponentInstance, x: ComponentInstance) => object
      ).call(vm, vm)
     : data || {}
  }

因?yàn)?Vue 在 beforeCreated 和 created 生命周期之間，會(huì) initState 對(duì)數(shù)據(jù)進(jìn)行處理，其中對(duì) data的處理時(shí)就會(huì)調(diào)用 $options.data拿到定義的數(shù)據(jù)，所以這里重新對(duì)該函數(shù)其包裹一層，這也是為什么要選擇 beforeCreate 鉤子注入的一個(gè)原因，必須在該函數(shù)調(diào)用前進(jìn)行包裹。 接下來看 initSetup都做了什么

function initSetup(vm: ComponentInstance, props: Record<any, any> = {}) {
  const setup = vm.$options.setup!
  const ctx = createSetupContext(vm)
  const instance = toVue3ComponentInstance(vm)
  instance.setupContext = ctx
  
  def(props, &#39;__ob__&#39;, createObserver())
  resolveScopedSlots(vm, ctx.slots)

  let binding: ReturnType<SetupFunction<Data, Data>> | undefined | null
  activateCurrentInstance(instance, () => {
    binding = setup(props, ctx)
  })

   // setup返回是函數(shù)的情況 需要重寫render函數(shù)

  const bindingObj = binding

  Object.keys(bindingObj).forEach((name) => {
    let bindingValue: any = bindingObj[name]

    // 數(shù)據(jù)處理
    
    asVmProperty(vm, name, bindingValue)
  })
  return
  }
}

這個(gè)函數(shù)比較長，不在本次要講解的主線上代碼邏輯都刪除了，這個(gè)函數(shù)主要是創(chuàng)建了 ctx 和把 vm 實(shí)例轉(zhuǎn)換成 Vue3 數(shù)據(jù)類型定義的 instance ，然后執(zhí)行 setup 函數(shù)得到返回值，然后遍歷每個(gè)屬性，調(diào)用 asVmProperty 掛載到 vm 上面，當(dāng)然這里的掛載不是直接通過把屬性和值添加到 vm 上面，這么做會(huì)有一個(gè)問題，就是后續(xù)對(duì)該屬性的修改不能同步到 vm 中，這里采用的還是 Vue 最常見的數(shù)據(jù)代理。

export function asVmProperty(
  vm: ComponentInstance,
  propName: string,
  propValue: Ref<unknown>
) {
  const props = vm.$options.props
  if (!(propName in vm) && !(props && hasOwn(props, propName))) {
    if (isRef(propValue)) {
      proxy(vm, propName, {
        get: () => propValue.value,
        set: (val: unknown) => {
          propValue.value = val
        },
      })
    } else {
      proxy(vm, propName, {
        get: () => {
          if (isReactive(propValue)) {
            ;(propValue as any).__ob__.dep.depend()
          }
          return propValue
        },
        set: (val: any) => {
          propValue = val
        },
      })
    }
}

看到這里，相信你已經(jīng)明白了在 setup 中定義返回的為什么能夠在 template 、 data 、 methods 等之中去使用了，因?yàn)榉祷氐臇|西都已經(jīng)被代理到 vm 之上了。

響應(yīng)式（ ref reactive 的實(shí)現(xiàn)）

接下來我們來說說響應(yīng)式相關(guān)的，為什么 ref 和 reactive 也可以讓數(shù)據(jù)成為響應(yīng)式的。

ref 的實(shí)現(xiàn)其實(shí)是對(duì) reactive 再次封裝，主要用來給基本類型使用。

function ref(raw?: unknown) {
  if (isRef(raw)) {
    return raw
  }

  const value = reactive({ [RefKey]: raw })
  return createRef({
    get: () => value[RefKey] as any,
    set: (v) => ((value[RefKey] as any) = v),
  })
}

因?yàn)?reactive 接受的必須是一個(gè)對(duì)象，所有這里使用了一個(gè)常量作為 ref 的 key

Wie benutzt man

const value = reactive({
  "composition-api.refKey": row
})

export function createRef<T>(
  options: RefOption<T>,
  isReadonly = false,
  isComputed = false
): RefImpl<T> {
  const r = new RefImpl<T>(options)

  const sealed = Object.seal(r)
  if (isReadonly) readonlySet.set(sealed, true)
  return sealed
}

export class RefImpl<T> implements Ref<T> {
  readonly [_refBrand]!: true
  public value!: T
  constructor({ get, set }: RefOption<T>) {
    proxy(this, &#39;value&#39;, {
      get,
      set,
    })
  }
}

Wie w?re es, wenn Sie es nach dem Lesen genauso empfinden wie vue3</? code>? Sie denken vielleicht: ??<ul><li>??Das ist <code>vue2. Meine vorherigen data und methods haben auch Variablen und Methoden . Wie geht das? Es wird mit dem Rückgabewert von setup zusammengeführt. [Verwandte Empfehlungen: vuejs Video-Tutorial, Web-Frontend-Entwicklung]??

??vue2 </ code> Stimmt es nicht, dass nur die in <code>data definierten Daten responsiv verarbeitet werden? Wie machen ref und reactive das? ??

??vue2 Für Einschr?nkungen, die durch responsive Daten definiert werden (Hinzufügen von Attributen, die nicht dem ursprünglichen Objekt zugewiesen sind, ?ndern von Array-Indizes usw.), verwenden Sie ref</ code> und Ist <code>reaktiv in Ordnung? ??

??Natürlich gibt es immer noch viele Zweifel, denn das Plug-in bietet ziemlich viel API und deckt den gr??ten Teil des Vue3 ab > hat, hier Lassen Sie uns anhand dieser Fragen analysieren, wie es gemacht wird. ??

Prinzipienanalyse

??Dank des Plug-in-Systems von Vue, @vue/ Die Kompositions-API wird ebenso wie vue-router und vuex über offiziell bereitgestellte Plug-Ins injiziert. ??

export function reactive<T extends object>(obj: T): UnwrapRef<T> {
    const observed = observe(obj)
    setupAccessControl(observed)
    return observed as UnwrapRef<T>
}


export function observe<T>(obj: T): T {
  const Vue = getRegisteredVueOrDefault()
  let observed: T
  if (Vue.observable) {
    observed = Vue.observable(obj)
  } else {
    const vm = defineComponentInstance(Vue, {
      data: {
        $$state: obj,
      },
    })
    observed = vm._data.$$state
  }

  return observed
}

??Vue-Plugin macht eine install-Methode für die Au?enwelt verfügbar. Wenn use aufgerufen wird, wird diese Methode aufgerufen und Der Vue-Konstruktor wird als Parameter übergeben und dann wird Vue.mixin aufgerufen, um die zu verarbeitende Funktion einzumischen, wenn der entsprechende Hook gemischt wird. ????Der n?chste Schritt besteht darin, zu sehen, was functionApiInit tut??rrreee??Denn Vue befindet sich in beforeCreated und created</code > Lebenszyklen Dazwischen verarbeitet <code>initState die Daten, und bei der Verarbeitung von data wird $options.data aufgerufen, um die definierten Daten abzurufen Daher wird diese Funktion hier neu umschlossen. Dies ist einer der Gründe, warum die Hook-Injektion beforeCreate ausgew?hlt wird. Sie muss vor dem Aufruf der Funktion umschlossen werden. Schauen wir uns als n?chstes an, was initSetup macht??rrreee??Diese Funktion ist relativ lang und die Codelogik, die diesmal nicht in der Hauptzeile steht, wurde gel?scht. Diese Funktion erstellt haupts?chlich ctx</code > Und konvertieren Sie die <code>vm-Instanz in eine instance, die durch den Datentyp Vue3 definiert ist, und führen Sie dann das setup</ aus. Code>-Funktion, um den Rückgabewert zu erhalten. Anschlie?end durchlaufen Sie jede Eigenschaft und rufen <code>asVmProperty auf, um sie auf vm bereitzustellen. Natürlich erfolgt die Bereitstellung hier nicht durch direktes Hinzufügen von Eigenschaften und Werte zu vm Oben gibt es ein Problem, das hei?t, sp?tere ?nderungen am Attribut k?nnen nicht mit vm synchronisiert werden Hier wird Vue verwendet. ??rrreee??Da ich das sehe, glaube ich, dass Sie verstanden haben, warum der in setup definierte zurückgegebene Wert in template, data und methods wird w?hrend des Wartens verwendet, da die zurückgegebenen Dinge an vm weitergeleitet wurden. ??

Responsive (Implementierung von ref reactive)

??Als n?chstes lassen wir uns reden über Reaktionsf?higkeit, warum ref und reactive auch Daten responsiv machen k?nnen. ????Die Implementierung von ref ist eigentlich eine Neukapselung von reactive, die haupts?chlich für Basistypen verwendet wird. ??rrreee??Da reactive ein Objekt akzeptieren muss, wird hier eine Konstante als key von ref verwendet, n?mlich ??

const value = reactive({
  "composition-api.refKey": row
})

export function createRef<T>(
  options: RefOption<T>,
  isReadonly = false,
  isComputed = false
): RefImpl<T> {
  const r = new RefImpl<T>(options)

  const sealed = Object.seal(r)
  if (isReadonly) readonlySet.set(sealed, true)
  return sealed
}

export class RefImpl<T> implements Ref<T> {
  readonly [_refBrand]!: true
  public value!: T
  constructor({ get, set }: RefOption<T>) {
    proxy(this, &#39;value&#39;, {
      get,
      set,
    })
  }
}

通過 new RefImpl 實(shí)例，該實(shí)例上有一個(gè) value 的屬性，對(duì) value 做代理，當(dāng)取值的時(shí)候返回 value[RefKey]，賦值的時(shí)候賦值給 value[RefKey], 這就是為什么 ref 可以用在基本類型，然后對(duì)返回值的 .value 進(jìn)行操作。調(diào)用 object.seal 是把對(duì)象密封起來（會(huì)讓這個(gè)對(duì)象變的不能添加新屬性，且所有已有屬性會(huì)變的不可配置。屬性不可配置的效果就是屬性變的不可刪除，以及一個(gè)數(shù)據(jù)屬性不能被重新定義成為訪問器屬性，或者反之。但屬性的值仍然可以修改。）

我們主要看下 reactive 的實(shí)現(xiàn)

export function reactive<T extends object>(obj: T): UnwrapRef<T> {
    const observed = observe(obj)
    setupAccessControl(observed)
    return observed as UnwrapRef<T>
}


export function observe<T>(obj: T): T {
  const Vue = getRegisteredVueOrDefault()
  let observed: T
  if (Vue.observable) {
    observed = Vue.observable(obj)
  } else {
    const vm = defineComponentInstance(Vue, {
      data: {
        $$state: obj,
      },
    })
    observed = vm._data.$$state
  }

  return observed
}

我們通過 ref 或者 reactive 定義的數(shù)據(jù)，最終還是通過了變成了一個(gè) observed 實(shí)例對(duì)象，也就是 Vue2 在對(duì) data 進(jìn)行處理時(shí)，會(huì)調(diào)用 observe 返回的一樣，這里在 Vue2.6+ 把observe 函數(shù)向外暴露為 Vue.observable，如果是低版本的話，可以通過重新 new 一個(gè) vue 實(shí)例，借助 data 也可以返回一個(gè) observed 實(shí)例，如上述代碼。

因?yàn)樵?reactive 中定義的數(shù)據(jù)，就如你在 data 中定義的數(shù)據(jù)一樣，都是在操作返回的 observed ，當(dāng)你取值的時(shí)候，會(huì)觸發(fā) getter 進(jìn)行依賴收集，賦值時(shí)會(huì)調(diào)用 setter 去派發(fā)更新， 只是定義在 setup 中，結(jié)合之前講到的 setup 部分，比如當(dāng)我們?cè)?template 中訪問一個(gè)變量的值時(shí)，vm.foo -> proxy 到 setup 里面的 foo -> observed 的 foo ，完成取值的流程，這會(huì)比直接在 data 上多代理了一層，因此整個(gè)過程也會(huì)有額外的性能開銷。

因此使用該 API 也不會(huì)讓你可以直接規(guī)避掉 vue2 響應(yīng)式數(shù)據(jù)定義的約束，因?yàn)樽罱K還是用 Object.defineProperty 去做對(duì)象攔截，插件同樣也提供了 set API 讓你去操作對(duì)象新增屬性等操作。

總結(jié)

通過上面的了解，相信你一定對(duì)于 Vue2 如何使用 composition API 有了一定的了解，因?yàn)?API 相當(dāng)多， 響應(yīng)式相關(guān)的就還有 toRefs、toRef、unref、shallowRef、triggerRef 等等，這里就不一一分析，有興趣的可以繼續(xù)看源碼的實(shí)現(xiàn)。

寫 Vue2 的同學(xué)也可以不用羨慕寫 Vue3 的同學(xué)了，直接引入到項(xiàng)目就可以使用起來，雖然沒有 vue3 那么好的體驗(yàn)，但是絕大部分場景還是相同的，使用時(shí)注意 README 文檔最后的限制章節(jié)，里面講了一些使用限制。

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

Das obige ist der detaillierte Inhalt vonAnalysieren Sie das Prinzip der Implementierung der Kompositions-API durch Vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!