Vue3 面试题 | 06.精选 Vue3 面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

Vue 3中的插槽有什么变化？

在 Vue 3 中，插槽的语法和功能与 Vue 2 基本相同，但是有一些小的差异。

在 Vue 2 中，你可以使用 slot 属性来定义插槽，使用 <slot> 元素来插入插槽内容。例如：

<template>
  <div>
    <h1>我的组件</h1>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

在上面的示例中，<slot> 元素用于插入子组件的内容。

在 Vue 3 中，slot 属性和 <slot> 元素仍然可以使用，但是现在还支持另一种语法：v-slot 指令。v-slot 指令可以用于定义具名插槽和作用域插槽。例如：

<template>
  <div>
    <h1>我的组件</h1>
    <template v-slot:default>
      默认插槽内容
    </template>
    <template v-slot:header>
      头部插槽内容
    </template>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

在上面的示例中，我们使用 v-slot:header 指令定义了一个具名插槽 header，使用 v-slot:default 指令定义了一个默认插槽。具名插槽可以在子组件中通过 v-slot 指令来引用，而默认插槽则可以直接插入内容。

此外，在 Vue 3 中，作用域插槽现在支持更多的语法，包括对象语法和函数语法。这些语法可以让你更方便地传递数据和处理插槽内容。

总的来说，Vue 3 中的插槽语法更加灵活和强大，但是对于大多数情况下的使用来说，与 Vue 2 中的语法并没有太大的差异。

Vue 3中的响应式数据更新是如何触发的？

在 Vue 3 中，响应式数据更新是通过观察者（Watcher）来触发的。当数据发生变化时，Vue 会自动创建一个观察者来监听数据的变化，并在数据发生变化时通知相关的组件进行更新。

具体来说，当你在 Vue 组件中使用 data 属性来定义响应式数据时，Vue 会在组件初始化时创建一个对应的观察者对象。这个观察者对象会监听数据的变化，并在数据发生变化时触发更新。

当数据发生变化时，Vue 会将新的值传递给观察者对象的 update 方法。update 方法会根据数据的变化类型来更新相关的组件。如果数据是对象或数组，update 方法会遍历数据中的所有属性，并对每个属性进行更新。

此外，在 Vue 3 中，响应式数据更新还支持细粒度的更新。你可以通过使用 trackBy 函数来指定如何更新数组或对象中的元素，以避免不必要的更新。

总的来说，Vue 3 中的响应式数据更新是通过观察者来实现的，它会自动监听数据的变化，并在数据发生变化时通知相关的组件进行更新。这种机制可以让你的组件更加高效和灵活。

Vue 3中的computed和watch有什么不同？

在 Vue 3 中，computed 和 watch 都是用于处理数据的方法，但是它们的用途和工作方式有所不同。

• computed 是一种计算属性，它用于根据其他属性或数据源来计算一个新的属性值。computed 属性的值是由其依赖的属性或数据源的变化来更新的。当依赖的属性或数据源发生变化时，computed 属性会自动更新，而不需要手动更新。
• watch 是一种观察者，它用于监听一个特定的属性或数据源，并在该属性或数据源发生变化时执行一个回调函数。watch 可以用于处理一些需要在数据变化时进行特定操作的情况，例如更新其他属性或执行一些异步操作。

总的来说，computed 是一种基于数据变化的自动计算属性，而 watch 是一种手动监听属性或数据源变化的方法。在实际应用中，你可以根据具体需求选择使用 computed 或 watch 来处理数据。

Vue 3中的虚拟DOM是如何工作的？

在 Vue 3 中，虚拟 DOM（Virtual DOM）是通过 diff 算法来实现的。虚拟 DOM 是一个轻量级的 JavaScript 对象，它代表了真实 DOM 的结构和状态。

当 Vue 组件的状态发生变化时，Vue 会创建一个新的虚拟 DOM 对象，并将其与之前的虚拟 DOM 对象进行比较。diff 算法会比较两个虚拟 DOM 对象的差异，并确定需要更新的真实 DOM 元素。

具体来说，diff 算法会比较两个虚拟 DOM 对象的节点，并根据节点的类型和属性来确定是否需要更新或删除节点。对于需要更新的节点，diff 算法会创建新的真实 DOM 元素，并将其插入到真实 DOM 中。

通过使用虚拟 DOM 和 diff 算法，Vue 可以高效地更新真实 DOM，从而提高应用程序的性能和响应速度。