面试题：前端

前端工程师岗位相关的基础、框架、浏览器、性能和工程化面试准备。

computed、watch、watchEffect 的区别是什么，分别适合什么场景？

computed 适合从响应式数据派生结果，watch 适合监听明确来源后执行副作用，watchEffect 会自动收集同步执行过程里的依赖。

Vue 2 生命周期按组件创建、挂载、更新、销毁理解；Vue 3 setup 在创建阶段执行，组合式生命周期用 onMounted、onUpdated、onUnmounted 等函数注册。

props 是父组件传给子组件的单向输入，子组件不能直接改；需要变更时通过事件、v-model 或本地副本把修改意图交回父组件。

Vue 组件通信要先判断组件关系和状态范围：父子用 props / emits，跨层级用 provide / inject，全局共享状态用 Pinia 或 Vuex。

稳定 key 帮助 Vue 在列表更新时识别节点身份，避免错误复用 DOM、组件实例和表单状态。

v-if 会按条件创建和销毁节点，v-show 会保留节点并通过 display 控制显示隐藏；选择时主要看切换频率和是否需要真正卸载。

Vue 修饰符把常见 DOM 事件处理、键盘判断和表单值转换写在模板上，让事件逻辑更短、更清楚。

Vue 2 主要依赖 Object.defineProperty 劫持已有属性，Vue 3 使用 Proxy 代理对象本身，因此能覆盖更多对象操作并减少旧响应式限制。

Vue 2 初始化响应式时只会劫持已有属性，后续新增对象属性和部分数组直接赋值不会自动变成响应式，Vue.set 用来补上响应式定义并触发更新。

ref 适合包装基本类型或需要整体替换的值，reactive 适合对象状态；toRef / toRefs 用来在解构或传递属性时保留响应式连接。