各位观众，晚上好！我是今天的主讲人，咱们今天聊聊Vue 3里一个略显神秘但又非常实用的小家伙：expose 选项。这玩意儿说简单也简单，说复杂也能把你绕晕。咱们争取用最通俗易懂的方式，把它扒个精光。
开场白：组件的“隐私”与“公开”
首先，想象一下你的房子。房子里有很多东西：卧室、厨房、客厅，还有各种你不想让外人看到的小秘密（比如藏在床底下的私房钱）。组件也一样，它内部也有很多东西：数据、方法、计算属性等等。但并不是所有东西都想让父组件直接访问。
默认情况下，父组件可以通过 ref 获取到子组件的实例，然后“胡乱访问”子组件的所有东西。这就像别人拿到了你房子的钥匙，可以随便进你的卧室翻你的抽屉，想想都可怕！
expose 选项就是用来控制组件的“隐私”和“公开”的。它就像一个门卫，决定哪些东西可以光明正大地暴露给父组件，哪些东西必须藏起来。
expose 选项：你的组件门卫
expose 选项是一个数组，里面列出了你想暴露给父组件的属性或方法的名字。只有出现在这个数组里的东西，才能被父组件通过 ref 访问到。
咱们先来个简单的例子：
// ChildComponent.vue
<template>
<div>
<p>Message: {{ message }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const message = ref('Hello from child!');
const internalSecret = ref('This is a secret!');
const publicMethod = () => {
alert('Public method called!');
};
const privateMethod = () => {
alert('This should not be accessible from parent!');
};
return {
message,
internalSecret, //默认情况下，这些都会暴露出去
publicMethod,
privateMethod
};
},
expose: ['message', 'publicMethod'] // 只暴露 message 和 publicMethod
};
</script>// ParentComponent.vue
<template>
<div>
<ChildComponent ref="childRef" />
<button @click="accessChild">Access Child</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import { ref, onMounted } from 'vue';
export default {
components: {
ChildComponent
},
setup() {
const childRef = ref(null);
const accessChild = () => {
if (childRef.value) {
console.log('Message from child:', childRef.value.message); // 可以访问
childRef.value.publicMethod(); // 可以访问
// 下面两行会报错，因为 internalSecret 和 privateMethod 没有被暴露
// console.log('Secret from child:', childRef.value.internalSecret);
// childRef.value.privateMethod();
}
};
return {
childRef,
accessChild
};
}
};
</script>在这个例子中，ChildComponent 使用了 expose 选项，只暴露了 message 和 publicMethod。所以，在 ParentComponent 中，你可以通过 childRef.value.message 和 childRef.value.publicMethod() 访问它们。但是，如果你尝试访问 childRef.value.internalSecret 或 childRef.value.privateMethod()，就会报错，告诉你这些属性或方法不存在。
expose 的好处：封装与维护
为什么要这么做呢？主要有以下几个好处：
- 封装性： 隐藏内部实现细节，只暴露必要的接口，提高组件的封装性。 这就像你的房子，你只允许朋友进客厅，不能随便进卧室。
- 维护性： 如果你修改了组件的内部实现（比如修改了
internalSecret的名字），只要暴露的接口不变，父组件就不需要做任何修改。 这样你的房子的装修风格变了，只要客厅还是客厅，朋友来做客就不会受到影响。 - 安全性： 防止父组件意外修改子组件的状态，避免不必要的副作用。 就像你锁上了卧室的门，防止熊孩子乱翻你的东西。
expose 与 defineExpose：两种写法，殊途同归
在 <script setup> 语法糖中，我们不能直接使用 expose 选项。 Vue 3 提供了 defineExpose 宏来达到同样的效果。
// ChildComponent.vue (using <script setup>)
<template>
<div>
<p>Message: {{ message }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello from child!');
const internalSecret = ref('This is a secret!');
const publicMethod = () => {
alert('Public method called!');
};
const privateMethod = () => {
alert('This should not be accessible from parent!');
};
defineExpose({
message,
publicMethod
});
</script>这段代码和前面的例子效果完全一样。 defineExpose 接受一个对象，对象的属性就是你想暴露的属性或方法。
源码剖析：expose 的幕后英雄
现在，咱们来深入源码，看看 expose 选项到底是怎么工作的。
首先，我们要知道，Vue 3 的组件是通过 createApp 创建的。在 createApp 内部，会调用 createComponent 来创建组件实例。 在创建组件实例的过程中，会处理 expose 选项。
简化版的源码流程大概是这样：
- 组件选项处理： Vue 会解析组件选项，包括
setup函数和expose选项。 - 执行
setup函数： 如果组件有setup函数，Vue 会执行它，并获取setup函数的返回值。 - 处理
expose选项： Vue 会根据expose选项，创建一个暴露对象（exposed object）。 - 将暴露对象绑定到组件实例： Vue 会将暴露对象绑定到组件实例的
exposed属性上。
咱们简化一下源码，模拟一下这个过程：
// 模拟 Vue 组件选项
const componentOptions = {
setup() {
const message = { value: 'Hello from child!' };
const internalSecret = { value: 'This is a secret!' };
const publicMethod = () => {
alert('Public method called!');
};
const privateMethod = () => {
alert('This should not be accessible from parent!');
};
return {
message,
internalSecret,
publicMethod,
privateMethod
};
},
expose: ['message', 'publicMethod']
};
// 创建组件实例
function createComponentInstance(options) {
const instance = {
exposed: null, // 初始值为 null
setupState: null // 保存 setup 函数返回的值
};
// 执行 setup 函数
instance.setupState = options.setup();
// 处理 expose 选项
if (options.expose) {
const exposed = {};
options.expose.forEach(key => {
if (instance.setupState.hasOwnProperty(key)) {
exposed[key] = instance.setupState[key];
}
});
instance.exposed = exposed;
}
return instance;
}
// 创建组件实例
const instance = createComponentInstance(componentOptions);
// 模拟父组件访问子组件
console.log('Exposed object:', instance.exposed); // 输出暴露对象
console.log('Message from child:', instance.exposed.message); // 可以访问
instance.exposed.publicMethod(); // 可以访问
// 下面两行会报错，因为 internalSecret 和 privateMethod 没有被暴露
// console.log('Secret from child:', instance.exposed.internalSecret);
// instance.exposed.privateMethod();这段代码模拟了 Vue 处理 expose 选项的过程。可以看到，Vue 会创建一个新的对象 exposed，然后根据 expose 选项，将 setup 函数返回的值中指定的属性或方法添加到 exposed 对象中。 最后，Vue 会将 exposed 对象绑定到组件实例的 exposed 属性上。
当父组件通过 ref 访问子组件时，实际上访问的就是子组件实例的 exposed 属性。如果没有 expose 选项，或者 expose 选项为空数组，那么 exposed 属性就是 setup 函数返回的所有属性和方法。
expose 的高级用法：动态暴露
expose 选项还可以动态地控制暴露的属性或方法。 也就是说，你可以根据某些条件，决定是否暴露某个属性或方法。
例如：
// ChildComponent.vue
<template>
<div>
<p>Message: {{ message }}</p>
<button @click="toggleSecret">Toggle Secret</button>
<p v-if="showSecret">{{ internalSecret }}</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const message = ref('Hello from child!');
const internalSecret = ref('This is a secret!');
const showSecret = ref(false);
const toggleSecret = () => {
showSecret.value = !showSecret.value;
};
const exposedProperties = computed(() => {
const exposed = {
message,
publicMethod
};
if (showSecret.value) {
exposed.internalSecret = internalSecret; // 动态暴露
}
return exposed;
});
const publicMethod = () => {
alert('Public method called!');
};
defineExpose(exposedProperties.value);
</script>在这个例子中，我们使用了一个计算属性 exposedProperties 来动态地生成暴露对象。 如果 showSecret.value 为 true，那么 internalSecret 就会被暴露。 否则，internalSecret 就不会被暴露。
expose 的注意事项
- 类型安全：
expose选项不会提供类型安全检查。 你需要自己确保暴露的属性或方法的类型是正确的。 - 响应式：
expose选项暴露的属性或方法是响应式的。 如果子组件的状态发生变化，父组件也会收到通知。 - 避免过度暴露： 尽量只暴露必要的接口，避免过度暴露内部实现细节。 这就像你的房子，你只需要告诉朋友客厅在哪里，不需要告诉他们卧室的钥匙藏在哪里。
expose 与 provide/inject 的区别
有些人可能会把 expose 和 provide/inject 搞混。 它们都是用来在组件之间共享数据的，但它们的使用场景和目的不同。
| 特性 | expose |
provide/inject |
|---|---|---|
| 目的 | 控制子组件暴露给父组件的公共 API。 | 在祖先组件中提供数据，并在后代组件中注入数据，实现跨层级组件的数据共享。 |
| 作用范围 | 只影响父子组件之间的访问。 | 影响祖先组件及其所有后代组件。 |
| 访问方式 | 父组件通过 ref 获取子组件实例，然后访问子组件的 exposed 属性。 |
后代组件通过 inject 选项或 useContext API 注入祖先组件提供的数据。 |
| 使用场景 | 当你需要控制子组件暴露给父组件的 API 时，可以使用 expose 选项。 例如，你想让父组件调用子组件的某个方法，但不想让父组件直接修改子组件的状态。 |
当你需要跨层级组件共享数据时，可以使用 provide/inject。 例如，你想在根组件中提供一个全局配置对象，然后在所有后代组件中使用这个配置对象。 |
| 控制粒度 | 可以精确控制哪些属性或方法可以被访问。 | 提供的数据对所有后代组件都是可见的，无法精确控制哪些后代组件可以访问哪些数据。（虽然可以通过复杂的条件判断来限制，但这不是其主要设计目的） |
简单来说，expose 是用来控制父子组件之间的“交流”，而 provide/inject 是用来实现跨层级组件的“广播”。
总结：expose，组件设计的瑞士军刀
expose 选项是 Vue 3 中一个非常强大的工具，它可以帮助我们更好地封装组件、提高代码的可维护性、以及增强代码的安全性。 虽然它看起来有点复杂，但是只要你理解了它的原理和使用场景，你就会发现它其实非常有用。
记住，expose 就像你的组件的门卫，它决定了哪些人可以进入你的组件，以及他们可以访问哪些东西。 合理地使用 expose 选项，可以让你的组件更加健壮、可靠、易于维护。
好了，今天的讲座就到这里。 感谢大家的聆听！ 如果大家还有什么问题，可以在评论区留言，我会尽力解答。 祝大家编程愉快！