★ ★ ★ ★ ★

如何理解 Vue 3 的响应式系统？Vue3 使用基于 Proxy 更快了吗？

⚡ 速记答案（30 秒）

核心：reactive/readonly/ref/computed/watch/watchEffect + effect 依赖收集 + trigger 通知更新。Proxy 懒代理：访问属性时才做拦截，初始化更快，天然支持嵌套对象 & 数组的响应式。

📖 详细讲解

标准面试回答（推荐记住）

Vue 3 的响应式系统基于 Proxy 实现，核心包括 reactive、ref、computed、watch 等 API。相比 Vue 2 的 Object.defineProperty，Proxy 是"懒代理"——只在访问属性时才做拦截，所以初始化更快。另外，Proxy 天然支持新增/删除属性和数组索引变更，不需要像 Vue 2 那样手动调用 $set。

Proxy vs Object.defineProperty

Vue 2 的局限性：
• 无法检测属性的添加或删除
• 无法监听数组索引变化
• 需要递归遍历所有属性，初始化开销大

Vue 3 Proxy 优势：
• 懒代理：只在访问时才代理嵌套对象
• 原生支持新增/删除属性
• 支持数组索引和 length 变化
• 支持 Map、Set、WeakMap、WeakSet

核心 API 对比

API	用途	特点
reactive	对象/数组	深度响应式
ref	任意类型	需要 .value
computed	计算属性	惰性求值+缓存
watch	监听变化	显式依赖
watchEffect	副作用	自动收集依赖

✅ 面试要点

•理解 Proxy 相比 Object.defineProperty 的优势
•能解释"懒代理"带来的性能提升
•知道 reactive 和 ref 的区别与适用场景

💻 代码示例

响应式系统基础用法

import { reactive, ref, computed, watch } from 'vue'

// reactive 用于对象
const state = reactive({
  count: 0,
  user: { name: 'Vue' }
})

// ref 用于基本类型
const count = ref(0)

// computed 计算属性
const double = computed(() => count.value * 2)

// watch 监听变化
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`)
})

Proxy 响应式原理演示（可交互）

<style>
  .reactive-demo { font-family: system-ui; }
  .state-display { background: #1e293b; padding: 16px; border-radius: 8px; margin: 12px 0; }
  .state-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #334155; }
  .state-item:last-child { border-bottom: none; }
  .label { color: #94a3b8; }
  .value { color: #22c55e; font-weight: bold; }
  .computed { color: #3b82f6; }
  .btn-group { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
  .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all 0.2s; }
  .btn-primary { background: #3b82f6; color: white; }
  .btn-primary:hover { background: #2563eb; }
  .btn-danger { background: #ef4444; color: white; }
  .btn-danger:hover { background: #dc2626; }
  .log { background: #0f172a; padding: 12px; border-radius: 6px; margin-top: 12px; font-family: monospace; font-size: 12px; max-height: 120px; overflow-y: auto; }
  .log-item { color: #94a3b8; padding: 2px 0; }
  .log-item.new { color: #fbbf24; }
</style>

<div class="reactive-demo">
  <div class="state-display">
    <div class="state-item">
      <span class="label">count (ref)</span>
      <span class="value" id="countValue">0</span>
    </div>
    <div class="state-item">
      <span class="label">double (computed)</span>
      <span class="computed" id="doubleValue">0</span>
    </div>
    <div class="state-item">
      <span class="label">user.name (reactive)</span>
      <span class="value" id="userName">Vue</span>
    </div>
  </div>
  
  <div class="btn-group">
    <button class="btn btn-primary" onclick="increment()">count++</button>
    <button class="btn btn-primary" onclick="decrement()">count--</button>
    <button class="btn btn-danger" onclick="changeName()">修改 user.name</button>
  </div>
  
  <div class="log" id="logPanel">
    <div class="log-item">💡 点击按钮体验响应式更新...</div>
  </div>
</div>

<script>
// 模拟 Vue 的 Proxy 响应式
const logs = [];
function log(msg) {
  logs.unshift(msg);
  if (logs.length > 8) logs.pop();
  document.getElementById('logPanel').innerHTML = 
    logs.map((l, i) => '<div class="log-item' + (i === 0 ? ' new' : '') + '">' + l + '</div>').join('');
}

// 模拟 ref
let count = 0;
function updateCount(val) {
  const old = count;
  count = val;
  document.getElementById('countValue').textContent = count;
  document.getElementById('doubleValue').textContent = count * 2;
  log('watch: count ' + old + ' → ' + count);
}

// 模拟 reactive
const user = new Proxy({ name: 'Vue' }, {
  set(target, key, value) {
    const old = target[key];
    target[key] = value;
    document.getElementById('userName').textContent = value;
    log('Proxy set: user.' + key + ' = "' + value + '"');
    return true;
  }
});

function increment() { updateCount(count + 1); }
function decrement() { updateCount(count - 1); }

const names = ['Vue', 'React', 'Angular', 'Svelte', 'Solid'];
let nameIndex = 0;
function changeName() {
  nameIndex = (nameIndex + 1) % names.length;
  user.name = names[nameIndex];
}
</script>

🎨 效果预览