【华为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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

算法大师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值