面试 Vue 框架八股文十问十答第三期

发布时间:2024年01月05日

面试 Vue 框架八股文十问十答第三期

作者:程序员小白条个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

?点赞?收藏?不迷路!?

1)Vue 中的 key 的作用

在 Vue 中,key 是用于给 Vue 识别节点的特殊属性。当 Vue 将数据渲染为虚拟 DOM 时,key 的作用是帮助 Vue 识别节点的标识,以便在数据更新时,高效地重新渲染节点而不是销毁和重新创建。它有助于 Vue 识别每个节点的唯一性,避免重新渲染整个列表。

2)为什么不建议用 index 作为 key?

在 Vue 中,不建议使用索引作为 key 是因为索引可能不稳定。如果列表数据发生变化,可能会导致节点重新排序,但使用索引作为 key 会使得 Vue 错误地识别节点,导致不必要的更新,甚至渲染错误。最好使用具有唯一标识符的属性作为 key。

3)为什么 v-for 和 v-if 不能一起使用

在同一个元素上同时使用 v-for 和 v-if 可能会导致预期之外的结果。v-for 指令优先级高于 v-if,这意味着 v-if 将被执行多次,可能造成性能问题。通常情况下,应该尽量避免在同一元素上同时使用 v-for 和 v-if。如果必须这样做,可以考虑在父级元素上使用 v-if 来过滤整个列表。

4)双向数据绑定的原理

Vue.js 使用了响应式数据的概念来实现双向数据绑定。它通过 Object.defineProperty 或 Proxy 来监听数据的变化,当数据发生变化时,视图会自动更新;反之,当用户与视图交互时,数据也会更新。

5)使用 Object.defineProperty() 来进行数据劫持有什么缺点?

Object.defineProperty() 是 Vue 早期版本用于实现数据响应式的方式。它有一些限制和缺点,比如不能监听数组的变化(需要额外的处理);还有就是需要递归地遍历对象的每个属性进行劫持,性能开销较大;此外,在旧版浏览器中兼容性也可能存在问题。Vue 3 使用了 Proxy API 作为默认的数据响应式实现,解决了 Object.defineProperty() 的一些限制和问题。

6)和 Vue3 相比有什么区别?

Vue 3 相对于 Vue 2 做了一些重要的改进和优化,其中一些主要区别包括:

  • Composition API(组合式 API):Vue 3 引入了 Composition API,这是一种基于函数的 API,允许开发者按照逻辑功能组织代码,而不是根据选项(如 data、methods 等)。这使得组件更易于理解、维护和重用。
  • Teleport(传送门):Vue 3 引入了 Teleport,这是一种可以将组件的内容渲染到 DOM 中的不同位置的机制,有助于更灵活地组织组件结构。
  • 性能优化:Vue 3 在底层做了很多性能优化,包括更快的渲染、更小的包体积、更好的 Tree-Shaking 支持等。
  • Proxy 替代 Object.defineProperty:Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty,这使得数据响应式系统更加灵活且能够监听更多类型的变化,同时在性能上有所提升。
  • 更好的 TypeScript 支持:Vue 3 对 TypeScript 的支持更加完善,使用 TypeScript 开发 Vue 应用更加方便。

7)Vue 是如何收集依赖的?

Vue 使用响应式系统来实现数据的双向绑定。在 Vue 2 中,它通过 Object.defineProperty 来实现数据的 getter 和 setter,从而收集和触发依赖。

当一个组件在模板中使用了一个响应式数据时,Vue 会在这个数据的 getter 中收集当前组件的 Watcher(观察者)。这个 Watcher 负责将组件的更新函数添加到依赖列表中。当这个数据发生变化时,setter 会通知所有收集了依赖的 Watcher,然后 Watcher 再触发组件的更新函数,从而更新视图。

在 Vue 3 中,通过使用 Proxy 来替代 Object.defineProperty,收集依赖的机制有所不同,但基本原理仍然是在 getter 中收集依赖,在 setter 中触发更新。

8)slot是什么?有什么作用?原理是什么?

slot(插槽) 是 Vue 中用于分发内容的一种机制。它允许父组件向子组件传递内容,实现更灵活的组件结构。

  • 作用:插槽允许在父组件中定义模板的一部分,然后将这一部分内容传递给子组件,子组件可以在指定位置插入这些内容。这使得组件更加灵活,可以适应各种用例。
  • 原理:插槽的原理是在父组件中使用 <slot> 标签定义插槽,然后在子组件中使用 <slot> 标签的 name 属性匹配父组件中相应的插槽。父组件的内容将被插入到匹配的插槽中,如果没有匹配的插槽,则会被放到默认插槽中。
<!-- 父组件 -->
<template>
  <div>
    <slot name="header">默认头部</slot>
    <div>父组件的其他内容</div>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <div>子组件的内容</div>
  </div>
</template>

9)对keep-alive的理解,它是如何实现的,具体缓存的是什么?

keep-alive 是 Vue 中的一个内置组件,用于缓存动态组件或者组件的状态,以避免在组件切换时重复渲染和销毁。

  • 实现原理:keep-alive 使用了一个缓存对象来存储被包裹的组件实例。当组件被包裹在 keep-alive 中时,它的状态会被缓存,而不是被销毁。当再次切换到相同的组件时,Vue 会从缓存中取出之前的实例,而不是重新创建一个新的实例。
  • 具体缓存的是什么:keep-alive 缓存的是组件的实例,包括组件的状态、DOM 结构等。这样在再次激活时,可以直接使用之前缓存的实例,避免重新渲染和初始化。
<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

10)$nextTick 原理及作用

$nextTick 是 Vue 提供的一个异步执行的方法,它的作用是在下次 DOM 更新循环结束之后执行指定的回调函数。在一些场景中,当你修改了数据后,想要在 DOM 更新后执行一些操作,就可以使用 $nextTick

原理:Vue 中使用了事件循环机制,$nextTick 利用了 JavaScript 的事件循环机制,在 DOM 更新后触发回调。它会把传入的回调函数推入一个回调队列,在下一次事件循环中执行,确保在 DOM 更新完成之后执行。

作用

  • 在数据变化后立即操作 DOM。
  • 等待 Vue 更新完毕再执行一些操作。
  • 在组件生命周期钩子中使用,确保在组件更新后执行
文章来源:https://blog.csdn.net/qq_67358181/article/details/135411047
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。