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

各位观众，大家好！今天咱们来聊聊 Vue 3 源码里一个挺有趣，但平时可能不太注意的家伙：expose。它就像一个VIP通道的门卫，决定了你的组件里哪些东西能被外部访问，哪些得藏着掖着。

一、啥是expose？为啥要有它？

首先，咱们得明白 expose 是个啥。简单来说，expose 是 Vue 3 组件选项中的一个配置项，它允许你显式地声明组件实例中哪些属性需要暴露给父组件，或者通过模板引用 (ref attribute) 访问。

那为啥需要它呢？这得从 Vue 的设计哲学说起。Vue 希望组件内部的实现细节尽可能地被封装起来，只暴露必要的接口。这样做的目的是：

降低耦合度： 组件之间的依赖关系更清晰，修改一个组件的内部实现不容易影响到其他组件。
增强可维护性： 组件内部的代码可以随意重构，只要暴露的接口不变，外部就不需要做任何修改。
提高安全性： 避免外部组件意外地修改组件内部的状态。

在 Vue 2 中，默认情况下，组件实例的所有属性都会暴露给父组件。这就像你家大门敞开，谁都能进来看一样，既不安全，也不优雅。Vue 3 引入了 expose，让你可以控制哪些属性可以被外部访问，就像给大门装了门禁系统，只有授权的人才能进入。

二、 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 privateData = ref('This is a secret!');

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

    return {
      count,
      increment,
      privateData // 不暴露
    };
  },
  expose: ['count', 'increment'] // 只暴露 count 和 increment
});
</script>

在这个例子中，我们只暴露了 count 和 increment。这意味着，父组件可以通过模板引用访问 count 和 increment，但无法访问 privateData。

三、 expose 和 getCurrentInstance().proxy

expose 的核心作用是控制 getCurrentInstance().proxy 的行为。getCurrentInstance() 允许你在 setup 函数中访问当前组件的实例。getCurrentInstance().proxy 是一个代理对象，它指向组件的公共 API。

当你在组件中使用了 expose 选项时，getCurrentInstance().proxy 只会包含 expose 列表中指定的属性。如果没有使用 expose 选项，则 getCurrentInstance().proxy 会包含组件中返回的所有属性。

咱们用代码来说话：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="child" />
    <p>Count from child: {{ childCount }}</p>
    <button @click="incrementChild">Increment Child</button>
  </div>
</template>

<script>
import { ref, defineComponent, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null);
    const childCount = ref(0);

    onMounted(() => {
      childCount.value = child.value.count; // 访问 child 组件暴露的 count 属性
    });

    const incrementChild = () => {
      child.value.increment(); // 调用 child 组件暴露的 increment 方法
    };

    return {
      child,
      childCount,
      incrementChild
    };
  }
});
</script>

在这个例子中，ParentComponent 通过模板引用 child 访问 ChildComponent 的属性和方法。如果 ChildComponent 没有使用 expose 选项，或者 expose 列表中没有包含 count 和 increment，那么 ParentComponent 将无法访问它们。

四、 expose 的源码实现 (简化版)

好了，现在咱们来扒一扒 expose 的源码，看看它到底是怎么实现的。由于 Vue 3 的源码比较复杂，咱们这里只看一个简化版的实现，抓住核心思想就行。

Vue 3 的组件渲染过程大致可以分为以下几个步骤：

创建组件实例： 创建一个组件实例对象，包含组件的状态、props、methods 等。
执行 setup 函数： 执行组件的 setup 函数，获取 setup 函数的返回值。
创建渲染函数： 根据模板编译生成渲染函数。
执行渲染函数： 执行渲染函数，生成虚拟 DOM。
更新 DOM： 将虚拟 DOM 渲染到真实 DOM 上。

expose 的处理主要发生在执行 setup 函数之后，创建渲染函数之前。Vue 会检查组件是否定义了 expose 选项，如果定义了，就根据 expose 列表创建一个新的代理对象，这个代理对象只包含 expose 列表中指定的属性。

以下是一个简化版的 expose 实现：

function applyExpose(instance) {
  const { expose } = instance.type; // 从组件选项中获取 expose 选项
  if (expose) {
    const publicPropertiesMap = {};
    expose.forEach(key => {
      publicPropertiesMap[key] = true;
    });

    const publicThis = {}; // 创建一个新的代理对象

    for (const key in instance.setupState) {
      if (publicPropertiesMap[key]) {
        Object.defineProperty(publicThis, key, {
          get: () => instance.setupState[key],
          enumerable: true,
          configurable: true
        });
      }
    }

    instance.exposed = publicThis; // 将新的代理对象赋值给 instance.exposed
  } else {
    instance.exposed = instance.setupState; // 如果没有 expose 选项，则直接使用 setupState
  }
}

这个函数的作用是：

获取 expose 选项： 从组件的 type 属性中获取 expose 选项。
创建 publicPropertiesMap： 创建一个对象，用于存储需要暴露的属性名。
创建 publicThis： 创建一个新的代理对象，用于存储暴露的属性。
遍历 setupState： 遍历 setup 函数的返回值，如果属性名在 publicPropertiesMap 中，则将其添加到 publicThis 中。
赋值 instance.exposed： 将 publicThis 赋值给组件实例的 exposed 属性。

在组件的渲染过程中，Vue 会使用 instance.exposed 作为组件的公共 API。因此，如果使用了 expose 选项，那么外部组件只能访问 instance.exposed 中包含的属性。

五、源码细节剖析

刚才咱们只是看了一个简化版的 expose 实现，现在咱们来深入一下 Vue 3 的源码，看看它到底是怎么实现的。

在 Vue 3 的源码中，expose 的处理主要发生在 createComponentInstance 函数和 setupComponent 函数中。

createComponentInstance 函数： 这个函数负责创建组件实例。在创建组件实例时，会为组件实例添加一个 exposed 属性，用于存储组件的公共 API。

// packages/runtime-core/src/component.ts

export function createComponentInstance(
  vnode: VNode,
  parent: ComponentInternalInstance | null,
  suspense: SuspenseBoundary | null
) {
  const type = vnode.type as Component;

  // 省略其他代码...

  const instance: ComponentInternalInstance = {
    // 省略其他代码...
    exposed: {}, // 初始化 exposed 属性
    // 省略其他代码...
  };

  return instance;
}

setupComponent 函数： 这个函数负责执行组件的 setup 函数，并处理 setup 函数的返回值。在这个函数中，会调用 handleSetupResult 函数来处理 setup 函数的返回值。

// packages/runtime-core/src/component.ts

export function setupComponent(
  instance: ComponentInternalInstance,
  isSSR = false
) {
  const Component = instance.type as ComponentOptions;

  // 省略其他代码...

  const { setup } = Component;

  if (setup) {
    // 省略其他代码...

    const setupResult = callWithErrorHandling(
      setup,
      instance,
      ErrorCodes.SETUP_FUNCTION,
      [...setupParams]
    ) as MaybePromise<SetupReturnValue>;

    handleSetupResult(instance, setupResult, isSSR);
  } else {
    finishComponentSetup(instance, isSSR);
  }
}

handleSetupResult 函数： 这个函数负责处理 setup 函数的返回值。如果 setup 函数返回的是一个对象，那么会将这个对象赋值给组件实例的 setupState 属性。然后，会调用 applyExpose 函数来处理 expose 选项。

// packages/runtime-core/src/component.ts

function handleSetupResult(
  instance: ComponentInternalInstance,
  setupResult: SetupReturnValue,
  isSSR: boolean
) {
  if (isFunction(setupResult)) {
    // 省略其他代码...
  } else if (isObject(setupResult)) {
    instance.setupState = proxyRefs(setupResult);
  } else if (__DEV__ && setupResult != null) {
    warn(
      `setup() should return an object. Received ${
        setupResult === null ? null : typeof setupResult
      }.`
    );
  }

  finishComponentSetup(instance, isSSR);
}

finishComponentSetup 函数： 这个函数负责完成组件的 setup 过程。在这个函数中，会调用 applyExpose 函数来处理 expose 选项。

// packages/runtime-core/src/component.ts

function finishComponentSetup(
  instance: ComponentInternalInstance,
  isSSR: boolean,
  skipOptions?: boolean
) {
  const Component = instance.type as ComponentOptions;

  // 省略其他代码...

  if (Component.expose) {
    applyExpose(instance);
  }
}

applyExpose 函数： 这个函数就是咱们刚才看到的简化版的 expose 实现。它的作用是根据 expose 选项创建一个新的代理对象，并将这个代理对象赋值给组件实例的 exposed 属性。

// packages/runtime-core/src/component.ts

function applyExpose(instance: ComponentInternalInstance) {
  const { expose } = instance.type;
  if (expose) {
    const exposed = proxyRefs(
      {}
    );
    const publicPropertiesMap = {};
    for (let i = 0; i < expose.length; i++) {
      publicPropertiesMap[expose[i]] = true;
    }
    for (const key in instance.setupState) {
      if (publicPropertiesMap[key]) {
        Object.defineProperty(exposed, key, {
          get: () => instance.setupState[key],
          set: (val) => (instance.setupState[key] = val), // 添加 setter
          enumerable: true,
          configurable: true
        });
      }
    }
    instance.exposed = exposed;
  } else {
    instance.exposed = instance.setupState;
  }
}

六、 expose 和 ref 模板引用

expose 不仅影响 getCurrentInstance().proxy，还会影响通过 ref 模板引用访问组件实例的方式。当你在父组件中使用了 ref 属性来引用子组件时，实际上你访问的就是子组件的 exposed 属性。

这意味着，如果子组件没有使用 expose 选项，或者 expose 列表中没有包含你想要访问的属性，那么你将无法通过 ref 模板引用访问该属性。

七、 expose 的注意事项

在使用 expose 选项时，需要注意以下几点：

显式声明： 必须显式地声明需要暴露的属性，否则外部组件无法访问。
响应式： expose 暴露的属性是响应式的，当组件内部的状态发生变化时，外部组件也会收到通知。
类型： expose 暴露的属性的类型必须与组件内部的类型一致。
避免过度暴露： 尽量只暴露必要的属性，避免过度暴露组件的内部实现细节。
只读性： 暴露的属性默认是可读写的，如果需要限制外部组件修改组件内部的状态，可以使用 readonly 函数将属性设置为只读。

八、总结

expose 是 Vue 3 中一个非常重要的特性，它可以帮助你更好地封装组件，降低组件之间的耦合度，提高组件的可维护性和安全性。通过显式地声明需要暴露的属性，你可以控制组件的公共 API，避免外部组件意外地修改组件内部的状态。

希望通过今天的讲解，大家对 expose 有了更深入的了解。在实际开发中，可以灵活运用 expose 选项，编写出更加健壮、可维护的 Vue 组件。

最后，送给大家一句编程界的至理名言：Less is more! （少即是多）在设计组件 API 时，尽量只暴露必要的属性，让你的组件更加优雅、简洁。

好，今天的讲座就到这里，谢谢大家！

发表回复 取消回复

发表回复取消回复