vue3 defineExpose 原理

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
}
相关推荐
盏茶作酒2933 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
ze_juejin1 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
小样还想跑3 小时前
axios无感刷新token
前端·javascript·vue.js
用户3802258598243 小时前
vue3源码解析:响应式机制
前端·vue.js
时间会给答案scidag3 小时前
报错 400 和405解决方案
vue.js·spring boot
白杨木影子被拉长4 小时前
多状态映射不同样式(scss语法)
vue.js·uni-app
长路 ㅤ   4 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
Jinxiansen02115 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
婉婉耶6 小时前
VUE带你乘风破浪~
前端·vue.js