Was ist Exposure in Vue3.2? Was ist der Nutzen?

Wofür wird das neue Exposé in Vue3.2 verwendet? Der folgende Artikel wird Ihnen ein gutes Verständnis des Expose-Tools von Vue3.2 vermitteln. Ich hoffe, er wird Ihnen hilfreich sein!

Mit der Veröffentlichung von Vue 3.2 wird uns ein neues Kompositionstool namens expose zur Verfügung gestellt. (Teilen von Lernvideos: vue-Video-Tutorial) expose。（学习视频分享：vue视频教程）

你是否曾经创建过一个需要向模板提供一些方法和属性的组件，但又希望这些方法对组件是私有的，不能被父类调用？

如果你在开发一个开源的组件或库，你有可能想保持一些内部方法的私有性。在Vue 3.2之前，这并不容易实现，因为所有在选项API中声明的方法或数据等都是公开的，所以模板可以访问它。

组合API也是如此。我们从setup方法中返回的所有东西都可以被父类直接访问。

组合 API

让我们看一个实际的例子。想象一下，我们有一个组件，它创建了一个计数器，每一秒都会更新这个计数器。

** MyCounter.vue**

<template>
    <p>Counter: {{ counter }}</p>

    <button @click="reset">Reset</button>
    <button @click="terminate">☠️</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

从组合的角度来看，我希望父级组件能够在需要时直接调用reset方法--但我希望保持terminate 函数和 counter 的引用只对组件可用。

如果我们把这个组件实例化到一个父类中，例如 App.vue，并给它附加一个 ref 引用，我们可以很容易地让父类调用 reset 方法，因为当我们从 setup 中返回它时，它已经和 terminate 一起被暴露了。

App.vue

<template>
  <MyCounter ref="counter" />

  <button @click="reset">Reset from parent</button>
  <button @click="terminate">Terminate from parent</button>
</template>

<script>
import MyCounter from '@/components/MyCounter.vue'

export default {
  name: 'App',
  components: {
    MyCounter
  },
  methods: {
    reset () {
      this.$refs.counter.reset()
    },
    terminate () {
      this.$refs.counter.terminate()
    }
  }
}
</script>

如果现在运行这个，并单击重置或终止按钮，两者都可以工作。

让我们明确说明我们要向父类暴露(expose)的内容，以便只有 reset 函数可用。

** MyCounter.vue**

<script>
import { ref } from 'vue'

export default {
  setup (props, context) {
    const counter = ref(null)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      console.log(interval)
      clearInterval(interval)
    }

    context.expose({ reset })

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

这里，我们在setup函数中加入了 props 和 context 参数。我们需要有可用的上下文，因为这是 expose 函数的位置。我们也可以像这样使用重构: { expose }。

接下来，我们使用 context.expose 来声明一个我们想要向实例化这个组件的父类公开的元素对象；在这个例子中，我们只打算让 reset 功能可用。

如果我们再次运行这个例子，并点击 "Terminate from parent" 按钮，我们会得到一个错误。

Uncaught TypeError: this.$refs.counter.terminate is not a function

terminate 功能不再可用，我们的私有API现在也无法访问了。

选项API

上面我们在 composition API 使用 exponse，但在options API中也可以使用这个方法。我们可以把它改写成如下。

//  MyCounter.vue


export default {
  created () { ... },
  data: () => ({ counter: null }),
  methods: {
    reset () { ... },
    terminate () { ... }
  },
  expose: ['reset']
}

注意，我们添加了一个新的选项API属性expose，允许我们传入一个数组，其中字符串'reset'是我们公开的函数的名称。

组合API 渲染功能

创建一个强大脸灵活的组件的方法是利用渲染函数的力量。这对Vue 3来说并不新鲜，但是随着composition API的建立，我们现在可以灵活地从setup方法中直接返回组合API h 函数。

这就产生了一个问题，因为在我们的setup函数中，整个return语句只是包含组件正在创建的节点的 h 方法。

如果在这个时候我们选择向父类 expose 一些东西，我们就会遇到与我们之前看到的相反的问题。没有任何东西被暴露，因为除了DOM元素，没有任何东西被返回。

让我们重写 MyCounter.vue 组件来使用这个方法。

<script>
// The template has been deleted
import { ref, h } from 'vue'

export default {
  setup (props, context) {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    // context.expose({ reset })

    return () => h('div', [
      h('p', `Counter: ${counter.value}`),
      h('button', { onClick: reset }, 'Reset'),
      h('button', { onClick: terminate }, 'Terminate')
    ])
  }
}
</script>

注意，我们在顶部从Vue导入了 h，因为我们需要用它来创建我们的DOM元素。

为了说明问题，暂时注释了context.expose方法。

现在的 return 语句复制了我们之前的 <template> 的DOM结构，如果我们运行这个例子，我们能够正确点击元素上的重置和终止按钮。

然而，如果我们现在点击 "Reset from parent"按钮，我们会遇到一个错误。

Uncaught TypeError: this.$refs.counter.reset is not a function

reset方法不再被暴露，因为它没有被setup函数返回。为了解决这个问题，我们需要取消对context.expose

Haben Sie schon einmal eine Komponente erstellt, die einige Methoden und Eigenschaften für die Vorlage bereitstellen muss, Sie möchten aber, dass diese Methoden für die Komponente privat sind und nicht von der übergeordneten Klasse aufgerufen werden können? 🎜🎜Wenn Sie eine Open-Source-Komponente oder -Bibliothek entwickeln, möchten Sie möglicherweise einige interne Methoden privat halten. Vor Vue 3.2 war dies nicht einfach zu erreichen, da alle in der Options-API deklarierten Methoden oder Daten usw. öffentlich waren, sodass die Vorlage darauf zugreifen konnte. 🎜🎜Dasselbe gilt für die Kompositions-API. Auf alles, was wir von der setup-Methode zurückgeben, kann die übergeordnete Klasse direkt zugreifen. 🎜

Composition API

🎜Schauen wir uns ein praktisches Beispiel an. Stellen Sie sich vor, wir hätten eine Komponente, die einen Zähler erstellt und diesen Zähler jede Sekunde aktualisiert. 🎜🎜** MyCounter.vue** 🎜rrreee🎜 Aus Sicht der Komposition möchte ich, dass die übergeordnete Komponente bei Bedarf die Methode reset direkt aufrufen kann – aber ich möchte behalten Beenden-Funktionen und <code>counter sind nur für Komponenten verfügbar. 🎜🎜Wenn wir diese Komponente in einer übergeordneten Klasse wie App.vue instanziieren und eine Referenz darauf anhängen, können wir die übergeordnete Klasse problemlos die Methode reset aufrufen lassen, denn wenn wir sie verwenden von setup zurückgegeben wird, wurde es zusammen mit terminate verfügbar gemacht. 🎜🎜App.vue🎜rrreee🎜Wenn Sie dies jetzt ausführen und auf die Schaltfläche „Zurücksetzen“ oder „Beenden“ klicken, funktioniert beides. 🎜🎜Lassen Sie uns explizit angeben, was wir der übergeordneten Klasse verfügbar machen (expose), sodass nur die Funktion reset verfügbar ist. 🎜🎜** MyCounter.vue**🎜rrreee🎜Hier haben wir die Parameter props und context zur Funktion setup hinzugefügt. Wir müssen den Kontext verfügbar haben, da sich hier die Funktion expose befindet. Wir können auch ein Refactoring wie dieses verwenden: { explode . 🎜🎜Als nächstes deklarieren wir mit context.expose ein Elementobjekt, das wir der übergeordneten Klasse zur Verfügung stellen möchten, die diese Komponente instanziiert. In diesem Beispiel führen wir nur reset ist verfügbar. 🎜🎜Wenn wir dieses Beispiel erneut ausführen und auf die Schaltfläche „Vom übergeordneten Element beenden“ klicken, erhalten wir eine Fehlermeldung. 🎜rrreee🎜 Die Funktion <code>terminate ist nicht mehr verfügbar und auf unsere private API kann jetzt nicht mehr zugegriffen werden. 🎜

Option API

🎜Oben verwenden wir exponse in composition API, aber Diese Methode kann auch in der Options-API verwendet werden. Wir können es wie folgt umschreiben. 🎜rrreee🎜Beachten Sie, dass wir ein neues Options-API-Attribut expose hinzugefügt haben, das es uns ermöglicht, ein Array zu übergeben, in dem die Zeichenfolge 'reset' der Name der Funktion ist, die wir verfügbar machen . 🎜

API-Rendering-Funktionen kombinieren

🎜Der Weg zur Erstellung einer leistungsstarken und flexiblen Komponente besteht darin, die Leistungsfähigkeit von Rendering-Funktionen zu nutzen. Das ist in Vue 3 nichts Neues, aber mit der Einrichtung der Kompositions-API haben wir jetzt die Flexibilität, die Kompositions-API-Funktion h direkt von der Methode setup zurückzugeben. 🎜🎜Dies führt zu einem Problem, da in unserer Funktion setup die gesamte return-Anweisung nur den h des Knotens enthält, den die Komponente als Methode erstellt . 🎜🎜Wenn wir uns an dieser Stelle dafür entscheiden, der übergeordneten Klasse etwas zugänglich zu machen, werden wir auf das entgegengesetzte Problem stoßen wie zuvor. Es wird nichts angezeigt, da nichts außer DOM-Elementen zurückgegeben wird. 🎜🎜Überschreiben wir die Komponente MyCounter.vue, um diese Methode zu verwenden. 🎜rrreee🎜 Beachten Sie, dass wir oben h aus Vue importiert haben, weil wir es zum Erstellen unserer DOM-Elemente benötigen. 🎜🎜Um das Problem zu veranschaulichen, wird die Methode context.expose vorübergehend kommentiert. 🎜🎜Jetzt kopiert die Return-Anweisung die DOM-Struktur unseres vorherigen <template> und wenn wir dieses Beispiel ausführen, können wir korrekt auf die Schaltflächen „Zurücksetzen“ und „Kill“ am Element klicken. 🎜🎜Wenn wir jetzt jedoch auf die Schaltfläche „Vom übergeordneten Gerät zurücksetzen“ klicken, tritt ein Fehler auf. 🎜rrreee🎜Die reset-Methode wird nicht mehr verfügbar gemacht, da sie nicht von der setup-Funktion zurückgegeben wird. Um dieses Problem zu lösen, müssen wir den Aufruf von context.expose abbrechen und ihn wieder verfügbar machen. 🎜

Zusammenfassung

Die neue expose Methode ist sehr intuitiv und einfach in unseren Komponenten zu implementieren. Es klärt einige sehr wichtige Kompositionsprobleme, die in der Vergangenheit das Umschreiben einer gesamten Komponente erfordert hätten. Selbst wenn es sich also nicht um eine API handelt, die Sie täglich verwenden, lohnt es sich, sie in unseren Ordnern zu sammeln und zu verstauben.

Englischer Originaltext: https://www.vuemastery.com/blog/understanding-vue-3-expose/

[Empfohlene verwandte Video-Tutorials: vuejs Einführungs-Tutorial, Erste Schritte mit dem Web-Frontend ]

Das obige ist der detaillierte Inhalt vonWas ist Exposure in Vue3.2? Was ist der Nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!