华为OD面试真题题库
专栏:华为OD面试真题题库
目录: 最新华为OD面试手撕代码真题目录以及八股文真题目录
1. vue 中 key 的作用?为什么不能用 index 作为 key
在 Vue.js 中,key
是一个特殊的属性,主要用于 Vue 的虚拟 DOM 算法,在更新现有的 DOM 元素列表时识别 VNodes。使用 key
可以高效的更新虚拟 DOM,是一种给每个 vnode 设置一个独一无二的标识符,可以使 Vue 确定在 diff 过程中 vnode 的身份,从而重用和重新排序现有元素。
作用
- 身份标识:
key
的主要作用是为 VNode 提供一个唯一的标识,让 Vue 能够追踪每个节点的身份,从而重用和重新排序现有元素。 - 高效更新:在有相同标签元素的列表中,通过
key
可以产生更准确、更快速的 DOM 操作。
为什么不能用 index 作为 key
尽管在某些情况下使用 index 作为 key 是可以工作的,但在列表数据可能会发生变化的情况下,使用 index 作为 key 是有问题的:
-
列表重排序问题:如果数据项的顺序发生改变,例如排序操作,虽然子组件的数据变了,但是因为 index 没有改变,Vue 将不会触发组件的重新渲染,导致界面内容与数据不一致。
-
性能问题:使用 index 作为 key 可能会引起不必要的 DOM 元素重新创建和销毁,因为 Vue 认为位置变了就是不同的元素,即使这些元素可以被复用。
-
状态保留错误:当列表中某个项目被删除时,后面的项目会前移,但是他们的 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