Vue 3 中 expose 的用法和剖析

前言

在开发组件库或开源项目时，我们通常希望保持一些内部方法的私有性。在 Vue 3.2 之前，这并不容易实现，因为所有在选项 API 中声明的方法都是公开的。

expose 的诞生

为了解决这个问题，Vue 3.2 引入了 expose 功能。expose 允许您在组件中公开私有方法，而无需将其声明在选项 API 中。

expose 的语法

expose 的语法非常简单，只需要在组件的 setup 方法中使用 expose() 方法即可。expose() 方法接受一个对象作为参数，该对象包含要公开的方法。

const App = {
  setup() {
    const privateMethod = () => {
      console.log('This is a private method.');
    }

    expose({
      publicMethod: privateMethod
    })
  }
}

在上面的代码中，我们将 privateMethod 方法公开了。现在，您可以在组件的模板中使用 publicMethod 方法。

<template>
  <button @click="publicMethod()">Click me</button>
</template>

expose 的使用场景

expose 有很多使用场景，其中包括：

• 构建组件库：如果您正在构建一个组件库，您可以使用 expose 来公开组件的私有方法，以便用户可以更方便地使用您的组件。
• 开源项目：如果您正在开发一个开源项目，您可以使用 expose 来公开项目中的私有方法，以便其他开发人员可以更方便地使用您的项目。
• 私有方法的测试：如果您想测试组件中的私有方法，您可以使用 expose 来公开这些方法，以便您可以更方便地测试它们。

expose 的剖析

expose 的实现原理非常简单，它只是将要公开的方法添加到组件的实例上。这意味着，您可以使用 this 来访问公开的方法。

const App = {
  setup() {
    const privateMethod = () => {
      console.log('This is a private method.');
    }

    expose({
      publicMethod: privateMethod
    })

    return {
      publicMethod: this.publicMethod
    }
  }
}

在上面的代码中，我们将 privateMethod 方法添加到组件的实例上。现在，您可以在组件的模板中使用 publicMethod 方法。

<template>
  <button @click="publicMethod()">Click me</button>
</template>

expose 的局限性

expose 虽然非常有用，但也有其局限性。这些局限性包括：

• expose 只能公开方法，不能公开其他类型的属性或数据。
• expose 只能公开组件实例上的方法，不能公开组件外