vue3 defineExpose 原理

forgiveForever2024-11-06 10:13

vue3 defineExpose 原理

复制代码

import { defineExpose } from 'vue';


const onClose =()=> {
  alert('关闭')
};

defineExpose({ onClose });

编译之后变成

复制代码

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/components/outer.vue");import { defineComponent as _defineComponent } from "/node_modules/.vite/deps/vue.js?v=99ae7b0f";
import { ref } from "/node_modules/.vite/deps/vue.js?v=99ae7b0f";
const _sfc_main = /* @__PURE__ */ _defineComponent({
  __name: "outer",
  props: {
    msg: { type: String, required: true },
    title: { type: String, required: true }
  },
  emits: ["onSubmit"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const emits = __emit;
    const count = ref(0);
    const onSubmit = () => {
      emits("onSubmit");
    };
    const onClose = () => {
      alert("\u5173\u95ED");
    };
    __expose({ onClose });  defineExpose 变成
    const __returned__ = { emits, count, onSubmit, onClose };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});

__expose({ onClose }); 执行代码

复制代码

// vue 源码
function createSetupContext(instance) {
  /// __expose({ onClose }); 调用执行 走到
  const expose = (exposed) => {
    if (true) {
      if (instance.exposed) {
        warn$1(`expose() should be called only once per setup().`);
      }
      if (exposed != null) {
        let exposedType = typeof exposed;
        if (exposedType === "object") {
          if (isArray(exposed)) {
            exposedType = "array";
          } else if (isRef2(exposed)) {
            exposedType = "ref";
          }
        }
        if (exposedType !== "object") {
          warn$1(
            `expose() should be passed a plain object, received ${exposedType}.`
          );
        }
      }
    }
    instance.exposed = exposed || {};
  };
  / ...code
}