【华为OD技术面试真题 - 技术面】- 前端面试题（8）

华为OD面试真题题库

专栏：华为OD面试真题题库
目录: 最新华为OD面试手撕代码真题目录以及八股文真题目录

1. vue 中 key 的作用？为什么不能用 index 作为 key

在 Vue.js 中，key 是一个特殊的属性，主要用于 Vue 的虚拟 DOM 算法，在更新现有的 DOM 元素列表时识别 VNodes。使用 key 可以高效的更新虚拟 DOM，是一种给每个 vnode 设置一个独一无二的标识符，可以使 Vue 确定在 diff 过程中 vnode 的身份，从而重用和重新排序现有元素。

作用

1. 身份标识：key 的主要作用是为 VNode 提供一个唯一的标识，让 Vue 能够追踪每个节点的身份，从而重用和重新排序现有元素。
2. 高效更新：在有相同标签元素的列表中，通过 key 可以产生更准确、更快速的 DOM 操作。

为什么不能用 index 作为 key

尽管在某些情况下使用 index 作为 key 是可以工作的，但在列表数据可能会发生变化的情况下，使用 index 作为 key 是有问题的：

1. 列表重排序问题：如果数据项的顺序发生改变，例如排序操作，虽然子组件的数据变了，但是因为 index 没有改变，Vue 将不会触发组件的重新渲染，导致界面内容与数据不一致。

2. 性能问题：使用 index 作为 key 可能会引起不必要的 DOM 元素重新创建和销毁，因为 Vue 认为位置变了就是不同的元素，即使这些元素可以被复用。

3. 状态保留错误：当列表中某个项目被删除时，后面的项目会前移，但是他们的 index 减小了，Vue 将不会移动 DOM 元素，而是更新现有元素的数据，如果组件内部有维持状态，那么这些状态将会错位。

示例说明

假设有一个任务列表，每个任务有完成状态。如果使用 index 作为 key，删除一个任务后，所有后续任务的 index 会改变，这会导致 Vue 错误地重用了后续元素（因为 key 变了），可能会导致一些子组件状态（如输入框的值）表现异常。

为了避免这些问题，推荐使用每个项的唯一标识作为 key，如数据库中的 ID 或者是计算得到的哈希值。这样即便数据顺序变动，每个元素的 key 仍然保持不变，保证了组件状态的正确和列表渲染的性能。

2. Vue2和Vue3 ? defineProperty 和 Proxy?

Vue.js 在其版本 2 和版本 3 中使用了不同的响应式系统，这影响了其性能和功能。Vue 2 使用了 Object.defineProperty() 方法来实现响应式系统，而 Vue 3 则采用了 ES6 的 Proxy。这两种方法在技术上有显著差异，并影响着框架的使用和性能。

Vue 2 的 Object.defineProperty()

Vue 2 使用 Object.defineProperty() 来对数据对象的属性进行拦截。这种方法允许 Vue 精确控制对象的每个属性的访问器（getter 和 setter），实现数据的响应式变化。

优点:

• 兼容性好，支持 IE9 及以上版本的浏览器。

缺点:

• 无法检测到对象属性的添加或删除：只能在初始化时进行响应式转换，后续新增的属性或删除的属性不会触发更新。
• 无法原生支持 Map、Set、WeakMap 和 WeakSet 等数据结构的响应式。
• 性能开销较大：需要递归遍历所有对象属性，为每个属性设置 getter 和 setter。

Vue 3 的 Proxy

Vue 3 切换到使用 Proxy 对象，这是 ES6 引入的一个新特性。Proxy 允许 Vue 完全控制对对象的操作，包括属性访问、赋值、枚举、删除等。

优点:

• 性能提升：Proxy 可以代理整个对象，而不需要像 Object.defineProperty() 那样对每个属性单独处理。
• 动态响应：可以直接检测到对象属性的添加或删除，以及对数组的直接索引赋值和长度修改。
• 支持更多数据类型：可以对所有类型的对象，包括 Map、Set 等进行响应式代理。
• 更好的类型支持：对 TypeScript 友好，由于不需要标记额外的依赖。

缺点:

• 不支持 IE：Proxy 是一个 ES6 特性，不被 I