阐述 Vue 3 源码中 `expose` 选项的实现，它如何控制 `getCurrentInstance().proxy` 或 `ref` 模板引用可访问的公共 API。

大家好！今天咱们来聊聊 Vue 3 源码里一个挺有意思的选项：expose。它的作用嘛，就像一个“暴露”开关，控制着你的组件实例能被外部访问到哪些东西。想象一下，你的组件是一个神秘的小盒子，里面藏着各种宝贝（数据、方法啥的）。 expose 就决定了你能通过盒子上的小窗口（也就是模板引用或者 getCurrentInstance().proxy）看到哪些宝贝。

咱们先打个招呼，避免文章看起来冷冰冰的。

开场白：

嘿嘿，各位靓仔靓女们，今天咱们就来扒一扒Vue 3源码里expose这个小妖精的底裤，看看它到底是怎么玩转组件实例的“暴露”大法的！保证让你们听完之后，以后再也不用担心组件内部的秘密被别人偷窥啦！

正文：

1. expose 的基本概念

在 Vue 3 中，默认情况下，组件实例的 proxy (通过 getCurrentInstance().proxy 访问) 和模板引用 (ref attribute) 可以访问到组件内部的所有响应式状态和方法。但是，有时候我们并不希望把所有的东西都暴露出去，比如一些内部的实现细节，或者一些敏感的数据。这时候，expose 选项就派上用场了。

expose 选项允许你显式地声明哪些属性应该被暴露给父组件或者外部访问。如果你定义了 expose 选项，那么只有在 expose 中声明的属性才能被外部访问到。没有声明的属性，外部是无法访问的。就像给你的组件加了一层访问控制，只允许特定的人看到特定的内容。

2. expose 的用法

expose 选项可以是一个数组或者一个对象。

数组形式：

如果你只想暴露几个简单的属性，可以使用数组形式。数组中的每个元素都是一个字符串，表示要暴露的属性的名称。

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const count = ref(0);
    const internalValue = ref('secret');

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

    return {
      count,
      increment,
      internalValue // 内部属性，不希望外部访问
    };
  },
  expose: ['count', 'increment'] // 只暴露 count 和 increment
});
</script>

在这个例子中，只有 count 和 increment 会被暴露出去，internalValue 是无法通过 getCurrentInstance().proxy 或模板引用访问的。

对象形式 (更灵活)：

对象形式允许你更灵活地控制暴露的属性。对象的键是属性的名称，值可以是任何你想要暴露的值。这种方式允许你暴露计算属性、只读的代理对象等等。

<template>
  <div>
    <p>count: {{ exposedCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

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

    const exposedCount = computed(() => count.value * 2); // 计算属性

    return {
      count,
      increment,
      exposedCount
    };
  },
  expose: {
    exposedCount, // 暴露计算属性
    increment
  }
});
</script>

在这个例子中，我们暴露了一个计算属性 exposedCount 和一个方法 increment。注意，即使你在 setup 中返回了 count，但由于它没有在 expose 中声明，所以外部仍然无法访问。

3. 源码剖析： expose 是如何实现的？

现在，咱们深入 Vue 3 的源码，看看 expose 选项是如何实现的。这个过程涉及到 setup 函数的返回值处理和组件实例的代理对象创建。

setup 函数的返回值处理

在 Vue 3 中，setup 函数的返回值会被规范化为一个对象，这个对象会被用来创建组件实例的代理对象。 expose 选项会影响这个规范化的过程。

在 packages/runtime-core/src/component.ts 文件中，可以找到相关的代码：
```
function finishComponentSetup(
  instance: ComponentInternalInstance,
  isSSR: boolean,
  skipOptions: boolean = false
) {
  const Component = instance.type as ComponentOptions;

  // ...

  if (__DEV__ && instance.devtoolsRawSetupState) {
    // ...
  } else {
    instance.setupState = proxyRefs(setupResult);
  }

  // ...

  // expose bindings on the component instance
  if (Component.expose) {
    if (__DEV__ && !isArray(Component.expose) && typeof Component.expose !== 'object') {
      warn(
        `Invalid expose option: "${String(
          Component.expose
        )}" is not an array or object.`
      )
    }
    instance.exposed = {}
    const publicThis = instance.proxy!
    const exposeValues = isArray(Component.expose)
      ? Component.expose
      : Object.keys(Component.expose)
    for (let i = 0; i < exposeValues.length; i++) {
      const key = exposeValues[i]
      if (key in setupResult) {
        instance.exposed[key] = toRef(setupResult, key)
      } else if (key in instance.props) {
        instance.exposed[key] = toRef(instance.props, key)
      } else if (__DEV__) {
        warn(
          ``expose` key "${key}" not found in setup state or props.`
        )
      }
    }
  } else {
    instance.exposed = {}
  }
}
```
这段代码做了以下几件事：
1. 检查 expose 选项是否存在： 首先，它会检查组件的 expose 选项是否存在。
2. 处理 expose 选项： 如果 expose 选项存在，它会根据 expose 的类型（数组或对象）来处理。
  - 如果是数组，它会遍历数组中的每个属性名，然后从 setupResult (也就是 setup 函数的返回值) 中找到对应的属性，并将其添加到 instance.exposed 对象中。
  - 如果是对象，它会遍历对象的键，然后将键值对添加到 instance.exposed 对象中。
3. 创建 exposed 对象 源码中先创建了instance.exposed = {}，然后将需要暴露的属性添加到 instance.exposed 对象中。
4. 使用 toRef: 注意，这里使用了 toRef 函数。 toRef 函数会将一个响应式对象的属性转换为一个 ref 对象。这样做的好处是，即使 setupResult 中的属性不是 ref 对象，也可以通过 instance.exposed 访问到它的最新值。
5. 处理Props: 如果 setupResult 中没有找到对应的属性，会从 instance.props 中找。也就是说，expose也可以暴露props。

组件实例的代理对象创建

组件实例的代理对象 (也就是 instance.proxy) 是通过 createApp 函数创建的。 createApp 函数会使用 Proxy 对象来拦截对组件实例的访问，并根据 expose 选项来决定哪些属性可以被访问。

在 packages/runtime-core/src/componentPublicInstance.ts 文件中，可以找到相关的代码：

export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
  get({ _: instance }, key: string) {
    const {
      setupState,
      props,
      data,
      ctx,
      provides,
      exposed,
      exposeProxy,
      accessCache,
      renderCache,
      emit
    } = instance

    let result

    // ... 省略一些逻辑

    if (key in setupState) {
      result = setupState[key]
    } else if (hasOwn(props, key)) {
      result = props[key]
    } else if (hasOwn(data, key)) {
      result = data[key]
    } else if (hasOwn(ctx, key)) {
      result = ctx[key]
    } else if (key === PublicPropertiesMap.$attrs) {
      // ...
    } else if (key === PublicPropertiesMap.$slots) {
      // ...
    } else if (exposed && hasOwn(exposed, key)) {
      result = exposed[key]
    } else if (__DEV__) {
      // ...
    }

    return result
  },
  set({ _: instance }, key: string, value: any): boolean {
    const { setupState, props, data, ctx } = instance

    if (hasOwn(setupState, key)) {
      setupState[key] = value
    } else if (hasOwn(props, key)) {
      if (__DEV__) {
        warn(`Attempting to mutate prop "${String(key)}". Props are readonly.`)
      }
      return false
    } else if (hasOwn(data, key)) {
      data[key] = value
    } else if (hasOwn(ctx, key)) {
      ctx[key] = value
    } else {
      if (__DEV__) {
        warn(
          `Attempting to mutate non-existent property "${String(key)}".`
        )
      }
      return false
    }
    return true
  }
}

这段代码是 Proxy 对象的 get handler 函数。当外部访问组件实例的属性时，这个函数会被调用。函数会按照以下顺序查找属性：

setupState： setup 函数返回的状态。
props：组件的 props。
data：组件的 data。
ctx：组件的上下文。
exposed： 如果 exposed 对象存在，并且要访问的属性在 exposed 对象中，那么就返回 exposed 对象中对应的属性。

也就是说，只有在 exposed 对象中声明的属性才能被外部访问到。如果没有声明，那么外部是无法访问的。

4. expose 的作用

控制组件的公共 API： expose 允许你显式地声明哪些属性应该被暴露给父组件或者外部访问。这样做可以更好地控制组件的公共 API，避免暴露不必要的内部实现细节。
隐藏内部实现： 通过 expose，你可以隐藏组件内部的实现细节，只暴露必要的属性和方法。这样做可以提高组件的封装性，减少组件之间的耦合。
提高代码的可维护性： 通过 expose，你可以更好地组织和管理组件的公共 API。这样做可以提高代码的可读性和可维护性。
类型提示: 因为expose 显式地定义了组件的公共 API，所以可以提供更好的类型提示，方便开发者使用组件。

5. expose 的注意事项

默认情况下，所有属性都会被暴露： 如果你没有定义 expose 选项，那么组件内部的所有响应式状态和方法都会被暴露出去。
expose 只影响 getCurrentInstance().proxy 和模板引用： expose 只影响通过 getCurrentInstance().proxy 和模板引用访问组件实例的情况。如果你在组件内部直接访问自己的属性，那么是不会受到 expose 选项的影响的。
expose 选项是可选的： 你可以根据需要来决定是否使用 expose 选项。如果你觉得没有必要，可以不使用它。
expose 选项应该在 setup 函数中使用： expose 选项应该在 setup 函数中使用，因为只有在 setup 函数中才能访问到组件的状态和方法。

6. expose 的使用场景

组件库开发： 在开发组件库时，通常需要控制组件的公共 API，避免暴露不必要的内部实现细节。 expose 选项可以帮助你做到这一点。
大型项目开发： 在大型项目开发中，组件之间的交互非常复杂。使用 expose 选项可以更好地管理组件之间的依赖关系，提高代码的可维护性。
需要隐藏内部实现细节的组件： 有些组件可能包含一些敏感的数据或者复杂的实现细节。使用 expose 选项可以隐藏这些细节，保护组件的安全性。
封装第三方组件： 当你封装第三方组件时，可能需要对第三方组件的 API 进行简化或者修改。使用 expose 选项可以只暴露你想要暴露的 API。

7. 举例说明：封装一个第三方组件

假设我们要封装一个第三方的日期选择器组件。我们希望只暴露选择日期的方法和选中的日期，而隐藏其他内部的实现细节。

<template>
  <div>
    <button @click="openDatePicker">选择日期</button>
    <p>选中的日期：{{ selectedDate }}</p>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';
import ThirdPartyDatePicker from 'third-party-date-picker'; // 假设这是第三方日期选择器组件

export default defineComponent({
  components: {
    ThirdPartyDatePicker
  },
  setup() {
    const selectedDate = ref(null);
    const datePickerInstance = ref(null);

    const openDatePicker = () => {
      // 调用第三方日期选择器的方法
      datePickerInstance.value.open();
    };

    const handleDateSelected = (date) => {
      selectedDate.value = date;
    };

    return {
      selectedDate,
      openDatePicker,
      datePickerInstance,
      handleDateSelected // 内部方法，不希望外部访问
    };
  },
  expose: {
    selectedDate,
    openDatePicker
  },
  mounted() {
    // 创建第三方日期选择器实例
    datePickerInstance.value = new ThirdPartyDatePicker({
      onDateSelected: this.handleDateSelected // 内部方法，不希望外部访问
    });
  }
});
</script>

在这个例子中，我们只暴露了 selectedDate 和 openDatePicker，而隐藏了 datePickerInstance 和 handleDateSelected。这样做可以避免外部直接操作第三方日期选择器，从而保证组件的稳定性和安全性。

8. expose 的等价实现

如果你不想使用 expose 选项，也可以通过手动创建代理对象来实现类似的功能。例如：

<template>
  <div>
    <p>count: {{ exposedCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, computed, defineComponent, reactive } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

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

    const exposedCount = computed(() => count.value * 2); // 计算属性

    const exposed = reactive({
      exposedCount,
      increment
    });

    return {
      exposed // 返回代理对象
    };
  },
  expose: ['exposedCount', 'increment']
});
</script>

在这个例子中，我们手动创建了一个代理对象 exposed，然后将 exposedCount 和 increment 添加到代理对象中。最后，我们将 exposed 对象返回给组件实例。这样，外部只能访问到 exposed 对象中的属性，而无法访问到 count 属性。

表格总结

为了更好地总结 expose 选项的知识点，我创建了一个表格：

特性	描述
作用	控制组件实例的公共 API，决定哪些属性可以被外部访问。
类型	数组或对象
默认行为	如果没有定义 `expose` 选项，那么组件内部的所有响应式状态和方法都会被暴露出去。
影响范围	只影响通过 `getCurrentInstance().proxy` 和模板引用访问组件实例的情况。
使用场景	组件库开发、大型项目开发、需要隐藏内部实现细节的组件、封装第三方组件。
优势	可以更好地控制组件的公共 API，避免暴露不必要的内部实现细节；可以隐藏组件内部的实现细节，提高组件的封装性，减少组件之间的耦合；可以提高代码的可读性和可维护性。
注意事项	应该在 `setup` 函数中使用；数组形式只暴露属性名，对象形式可以暴露计算属性、只读的代理对象等等；如果属性在 `setupResult` 和 `props` 中都存在，会优先暴露 `setupResult` 中的属性。
源码位置	`packages/runtime-core/src/component.ts` (处理 `expose` 选项)，`packages/runtime-core/src/componentPublicInstance.ts` (创建组件实例的代理对象)。

结束语：

好啦，今天的 expose 选项源码解析就到这里。希望通过今天的学习，大家对 expose 选项有了更深入的了解。在实际开发中，可以根据需要灵活地使用 expose 选项，从而更好地控制组件的公共 API，提高代码的质量。

记住，expose就像你组件的保镖，只有它允许的才能出去见人！

如果大家有什么问题，欢迎留言提问！下次再见！

发表回复 取消回复

发表回复取消回复