一、Vue3的响应式系统如何抛弃了Object.defineProperty？

Vue2的响应式依赖Object.defineProperty劫持数据，但存在致命缺陷：无法监听数组索引/长度变化、对象属性新增删除需手动触发更新。
Vue3改用Proxy代理对象，直接拦截整个对象的操作（包括动态新增属性、数组方法等），并配合WeakMap优化依赖收集，内存占用减少50%。
隐藏考点：Proxy如何解决“深层嵌套对象监听”性能问题？答案在于“惰性劫持”——仅在访问时递归劫持子属性。

二、Composition API如何颠覆Options API的设计哲学？

Options API（如data、methods分块）在复杂组件中会导致逻辑分散，而Composition API通过setup()实现功能聚合：

// 复用逻辑封装为函数
function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}
// 组件中按需组合
setup() {
  const { count, increment } = useCounter()
  return { count, increment }
}

陷阱题：为什么setup中不能直接解构reactive对象？需用toRefs保持响应性。

三、<script setup>如何实现“零样板代码”开发？

1.自动暴露机制与编译优化

<script setup>通过编译器实现了自动变量提升，所有顶层绑定（变量、函数、导入组件）都会直接暴露给模板：

<script setup>
import { ref } from 'vue'
const count = ref(0) // 自动暴露，无需手动return
</script>

此处的count无需通过setup()函数返回，编译阶段会将其直接注入渲染函数作用域。

2.自定义指令的两种注册方式

(1) 局部指令定义
在<script setup>中，以v开头的驼峰式变量可直接作为局部指令：

<script setup>
const vLoading = {
  mounted(el) { el.loading = createLoadingElement() },
  updated(el, binding) { /* 控制显示逻辑 */ }
}
</script>

(2) 全局指令复用
全局指令需通过app.directive()在入口文件注册，使用时需显式导入并重命名：

<script setup>
import { myDirective as vMyDirective } from '@/directives'
</script>

四、Teleport如何解决模态框的z-index地狱？

当模态框嵌套在复杂DOM中时，CSS层级可能被父容器限制。Teleport可将组件渲染到任意DOM节点：

  
内容

实战技巧：常配合Suspense实现异步加载，用