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
}
相关推荐
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Shimeng_19898 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
MZWeiei9 小时前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
述雾学java9 小时前
Spring Boot + Vue 前后端分离项目解决跨域问题详解
vue.js·spring boot·后端
空城机9 小时前
从零打造前沿Web聊天室:消息系统
前端·vue.js
燕燕燕燕燕9 小时前
vue2基础-vue基础知识和原理
vue.js
用户3802258598249 小时前
vue中结合vue3-sfc-loader加载远程组件
vue.js
Jinxiansen021110 小时前
Nuxt + Pinia + Element Plus 后台管理系统搭建教程(含源码)
前端·javascript·vue.js
奇舞精选10 小时前
从零实现 Vue 响应式机制:带你吃透依赖收集与更新原理
vue.js