如何利用 Vue 3 的 `expose` 选项，控制组件内部属性和方法的对外暴露，提升组件封装性？

同学们，晚上好！我是老码，今天咱们来聊聊 Vue 3 里一个挺有意思的家伙——expose。这玩意儿啊，就像组件的“门卫”，能决定哪些东西可以被外部访问，哪些就得老老实实待在里面。用好了，组件封装性嗖嗖地往上涨，维护起来也更舒坦。

一、expose 是个啥？为啥需要它？

简单说，expose 就是 Vue 3 提供的，用来控制组件实例对外暴露属性和方法的选项。在 Vue 2 时代，我们想访问子组件内部的东西，直接通过 this.$refs.childComponent.xxx 就行了。但这种方式太粗暴了，啥都能访问，组件内部的实现细节完全暴露在外，简直像没穿衣服一样！

这有什么问题呢？

• 耦合度太高： 父组件直接依赖子组件的内部实现，一旦子组件内部结构调整，父组件也得跟着改，维护成本蹭蹭上涨。
• 封装性差： 组件内部的私有数据和方法不应该被外部访问，否则很容易被误用，导致不可预期的bug。
• 命名冲突： 如果父组件和子组件有相同的属性或方法名，很容易造成混乱。

expose 的出现就是为了解决这些问题。它可以让我们明确地指定哪些属性和方法可以被父组件访问，就像给组件加了一层保护罩，只允许特定的人通过特定的门进入。

二、expose 的基本用法：defineExpose

在 Vue 3 的 <script setup> 语法糖里，我们使用 defineExpose 来声明要暴露的属性和方法。

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const decrement = () => {
  if (count.value > 0) {
    count.value--;
  }
};

defineExpose({
  count, // 只暴露 count 属性
  increment // 只暴露 increment 方法
});
</script>

在这个例子中，我们使用 defineExpose 声明了只暴露 count 属性和 increment 方法。这意味着父组件可以通过 this.$refs.counterComponent.count 和 this.$refs.counterComponent.increment() 来访问它们，但是 decrement 方法是无法访问的。

三、expose 的进阶用法：隐藏内部状态

expose 的强大之处在于，它不仅可以控制暴露哪些属性和方法，还可以隐藏组件内部的状态。例如，我们可以创建一个只读的 count 属性，防止父组件直接修改它。

<template>
  <div>
    <p>计数器：{{ exposedCount }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup>
import { ref, readonly } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const decrement = () => {
  if (count.value > 0) {
    count.value--;
  }
};

const exposedCount = readonly(count); // 创建只读的 count

defineExpose({
  count: exposedCount, // 暴露只读的 count
  increment
});
</script>

在这个例子中，我们使用 readonly 函数创建了一个只读的 exposedCount 属性，然后将其暴露出去。这样，父组件可以访问 count 属性，但是无法修改它的值，从而保证了组件内部状态的安全性。

四、expose 与 TypeScript：类型安全

如果你使用了 TypeScript，expose 还能帮你提升代码的类型安全。你可以使用 defineExpose 的泛型参数来声明暴露的属性和方法的类型。

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

interface ExposedType {
  count: number;
  increment: () => void;
}

defineExpose<ExposedType>({
  count: count.value, // 注意这里需要传递 count.value，因为类型需要的是 number 而不是 Ref<number>
  increment
});
</script>

在这个例子中，我们定义了一个 ExposedType 接口，声明了 count 属性的类型为 number，increment 方法的类型为 () => void。然后，我们使用 defineExpose<ExposedType> 来告诉 Vue，这个组件暴露的属性和方法的类型应该符合 ExposedType 接口。这样，如果我们在父组件中访问了不存在的属性或方法，TypeScript 就会报错。

五、expose 的使用场景：组件库开发

expose 在组件库开发中尤其有用。它可以让我们控制组件库的 API，只暴露必要的属性和方法，隐藏内部实现细节，从而保证组件库的稳定性和可维护性。

例如，假设我们正在开发一个日期选择器组件库。我们可以使用 expose 来暴露以下 API：

属性/方法	类型	描述
selectedDate	Date | null	获取或设置选中的日期。
open()	() => void	打开日期选择器面板。
close()	() => void	关闭日期选择器面板。
onSelect	(date: Date) => void	注册日期选择事件的回调函数。当用户选择一个日期时，该回调函数会被调用，并传入选中的日期作为参数。

而组件内部的实现细节，比如日期面板的渲染逻辑、事件处理函数等，都可以隐藏起来，不对外暴露。

六、expose 的注意事项：不要过度暴露

虽然 expose 很好用，但是也要注意不要过度暴露。只暴露必要的属性和方法，尽量隐藏内部实现细节。否则，expose 就失去了它的意义，组件的封装性也会大打折扣。

七、expose 与 provide/inject 的区别

有些同学可能会问，expose 和 provide/inject 有什么区别？它们都是用来在组件之间传递数据的。

• expose： 用于父组件访问子组件的属性和方法，是单向的。
• provide/inject： 用于祖先组件向后代组件传递数据，是跨层级的。

简单来说，expose 就像是父组件主动去访问子组件，而 provide/inject 则是祖先组件主动提供数据给后代组件。

八、一个更完整的例子

// MyComponent.vue
<template>
  <div>
    <p>Value: {{ publicValue }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, readonly } from 'vue';

// 私有状态，外部不应该直接访问
const privateValue = ref(0);

// 计算属性，基于私有状态
const internalComputedValue = computed(() => privateValue.value * 2);

// 公有状态，通过 expose 暴露
const publicValue = readonly(ref(0));

const increment = () => {
  privateValue.value++;
  // 内部更新 publicValue，外部只能读取
  publicValue.value = privateValue.value;
};

interface MyComponentExpose {
  publicValue: number;
  increment: () => void;
}

defineExpose<MyComponentExpose>({
  publicValue: publicValue.value, // Important: Expose the .value of refs for simple values
  increment,
});
</script>

// ParentComponent.vue
<template>
  <div>
    <MyComponent ref="myComponent" />
    <p>Value from MyComponent: {{ myComponentValue }}</p>
    <button @click="incrementMyComponent">Increment MyComponent</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import MyComponent from './MyComponent.vue';

const myComponent = ref<InstanceType<typeof MyComponent> | null>(null);
const myComponentValue = ref(0);

onMounted(() => {
  if (myComponent.value) {
    myComponentValue.value = myComponent.value.publicValue; // Access exposed value
  }
});

const incrementMyComponent = () => {
  if (myComponent.value) {
    myComponent.value.increment(); // Call exposed method
     myComponentValue.value = myComponent.value.publicValue; // Update local value
  }
};
</script>

九、总结

expose 是 Vue 3 中一个非常有用的选项，它可以帮助我们控制组件内部属性和方法的对外暴露，提升组件的封装性。记住，要合理使用 expose，只暴露必要的 API，隐藏内部实现细节。这样，你的组件才能更加健壮、可维护。

好了，今天的分享就到这里。希望大家都能掌握 expose 的用法，写出更加优雅的 Vue 组件。下次再见！