如果要实现一个Vue3的弹窗组件，你会如何设计？
【概念释义】
Vue 3 弹窗组件需解决：显隐状态、Teleport 挂载到 body、焦点陷阱与 ESC 关闭、滚动锁定、v-model 双向绑定（modelValue / update:modelValue）及 可访问性（aria）。
推荐组合式 API + <Teleport> + 组合式函数 useLockScroll 抽离逻辑。
【基础使用】
vue
<!-- BaseModal.vue -->
<template>
<Teleport to="body">登录查看完整 1885 字
回答讨论
暂无讨论，登录后可抢先发言
本题库更多题目（50）
- Vue中如何实现强制刷新组件？
- 常见 Vue 2和Vue3 有哪些？分别说明区别?Vue 3有哪些更新？
- 在 Vue项目 里，如何引入SCSS?引入后如何使用？
- Vue Router 的核心实现原理是什么？
- 如何避免Element UI组件的频繁重新渲染，提升应用的性能？
- 请解释：JSX?Vue中怎么使用JSX 是什么？
- 如何销毁Vue组件中的定时器？
- Vuex状态管理存在什么缺点？
- 常见 Vue中封装的数组方法 有哪些？分别说明?它们如何实现视图更新？
- 请解释：事件总线EventBus?怎么在Vue项目中使用它 是什么？
- 为何要使用Vuex或者Redux状态管理?能够解决什么问题？请说明原因与场景？
- Redux 与 Vuex 有何不同？?它们的共同设计思想是什么？
- 如果想扩展某个现有的Vue组件，应该怎么做？
- 如何修改Vue打包后生成文件的路径？
- 为何Vue使用异步的方式更新组件？请说明原因与场景？
- 使用 Object.defineProperty 来进行数据劫持有什么缺点？
- Vuex的action和mutation之间 有哪些关键差异？
- Vue 3中的 Composition API与 Vue 2.x 的 Options API有么区别？
- Vue 3中的 watch 与 watchEffect 有何不同？?如何选择使用它们？
- 常见 Vue怎么与原生App进行交互? 有哪些？分别说明方法？
- 如何解决页面刷新后Vuex的state数据丟失的问题？
- Vue开发多语言项目 如何使用？举例说明？
- Vue手写一个过滤器 如何使用？举例说明？
- 如何让 Vue项目支持使用TypeScript？
- Vue3中的Fragment是什么?有什么作用？
- 在Vue自定义事件中，父组件如何接收子组件传递的多个参数？
- Vue项目部署上线前，需要做哪些准备工作？
- 常见 VueRouter的导航守卫 有哪些？分别说明?它们接受哪些参数？
- 如何解决Vue打包时 vendor 文件过大的问题？
- 常见 在移动端使用Vue， 有哪些？分别说明最佳实践？
- Vue如何缓存当前组件?缓存后如何更新？
- 切换到新路由时，如何实现页面滚动到顶部或保持原先的滚动位置？
- Element UI是什么?你如何在Vue项目中集成 Element UI？
- 请解释：SSR?它解决了什么问题?Vue项目如何实现SSR 是什么？
- 常见 Vue Router 的history模式部署上线时 有哪些？分别说明注意事项？
- Vue2修改了数组的哪些方法?为什么？
- 常见 Vue的v-once 有哪些？分别说明使用场景？
- 在 Vue 里，如何保存页面的当前状态？
- 使用Vue渲染大量数据时，如何进行优化？
- 常见 Vue能监听到数组变化的方法 有哪些？分别说明?为什么这些方法能监听到？
- Vue 的 Composition API和 React Hook 有么区别？
- 常见 Vue父子组件双向绑定的方法 有哪些？分别说明？
- Vue中prop验证的type类型有哪几种？
- Vue的el、template 与 render 有何不同？?各自的应用场景是什么？
- Vue中子组件和父组件钩子的执行顺序是什么？
- 常见 Vue Router的组件内路由钩子 有哪些？分别说明?分别在什么时机调用？
- 如何解决Vue初始化页面闪动的问题？
- 常见 Vue框架 有哪些？分别说明优点和缺点？
- 虚拟DOM的解析过程是怎样的？
- Vue组件中，如果使用原生addEventlistener监听事件，是否需要手动销毁?为什么？