前端面试常考点

SPA页面的理解

单页应用（Single Page Application，简称 SPA）是一个只包含一个 HTML 页面的应用，所有页面元素都加载在这个页面内，通过 JavaScript 实现不同内容的切换。 优点：

1. 无刷新加载，提升用户体验
2. 减少服务器压力
3. 前后端分离清晰 缺点：
4. SEO不友好
5. 首屏加载慢
6. 不支持IE8及以下

前端页面优化？

代码分割 图片优化（webp、懒加载） 合并/减少请求数量 加快资源传输（CDN、http/2、http/3） 浏览器缓存 gzip压缩 首屏优化（路由懒加载） v-for必须绑定key，避免与v-if同时使用

v-for为什么不能和v-if一起用？

Vue 2 中的行为： v-for 优先级 高于 v-if 意味着无论条件是否满足，都会先完整遍历数据源，为每一项创建虚拟节点 然后再对每个节点判断 v-if 条件来决定是否渲染 Vue 3 中的变化： v-if 优先级 高于 v-for 会导致 v-if 访问不到 v-for 内部变量（因为先执行 v-if 时 item 还不存在） 所以 Vue 3 中这样写会直接报错 意味着无论条件是否满足，都会先完整遍历数据源，为每一项创建虚拟节点

nextTick的作用？

nextTick 的原理是 Vue 在响应式数据变化后不会同步更新 DOM，而是将更新任务加入队列，在本轮事件循环结束后通过微任务统一执行 DOM patch。 nextTick 则是在 DOM 更新队列刷新完成后执行回调，保证拿到最新 DOM

v-for为什么写key？

key 的作用是给虚拟 DOM 节点一个稳定唯一标识，方便 Vue 在 diff 更新时准确判断节点复用、移动和删除，提高性能并避免组件状态错乱。

Vue的响应式原理

Vue2 响应式基于 Object.defineProperty，通过 getter 收集依赖，setter 派发更新，核心由 Dep 和 Watcher 实现。但它无法监听属性新增、删除及数组索引变化。

Vue3 使用 Proxy 重构响应式系统，通过 targetMap + ReactiveEffect 精准依赖追踪，支持新增删除属性、数组、Map、Set，并采用懒代理和调度器机制，性能与扩展性显著提升。

vue2:Object.defineProperty()

劫持对象单个属性的getter/setter，不能监听对象新增属性（this.$set）、删除属性、数组下标监听不到

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      dep.depend()
      return val
    },
    set(newVal) {
      val = newVal
      dep.notify()
    }
  })
}

vue3:ES6 Proxy

劫持整个对象，监听新增、删除、数组下标、数组方法，Map / Set （数据劫持get/set->依赖收集track->派发更新trigger）