前端高频面试题---VUE篇（四）

newboolean
111 阅读6分钟

1. vue3不再支持哪些功能

Vue3不再支持的功能包括：

  1. eventBus：在Vue3中，官方推荐的做法是使用第三方库，如mitt或tiny-emitter，而不是使用eventBus。
  2. Filters：在Vue3中，过滤器（Filters）已被删除，不再受支持。官方建议使用方法调用或计算属性来代替它们。

2. 在Vue 3中，diff算法是否与Vue 2相同？

Vue 3中的diff算法与Vue 2的diff算法有所不同。Vue 2使用的是基于递归的diff算法，而Vue 3使用的是基于数组的动态规划的diff算法。这种改进使得Vue 3在处理大型和复杂的组件时更加高效。

在Vue 2中，diff算法会逐层遍历虚拟DOM树，并将差异应用到真实DOM上。这种递归遍历的方式在处理小型组件时效率较高，但在处理大型和复杂的组件时可能会导致性能问题。

在Vue 3中，diff算法使用了基于数组的动态规划技术，可以更高效地比较和更新虚拟DOM。具体来说，Vue 3中的diff算法会首先将虚拟DOM节点与真实DOM节点进行比较，并记录下需要更新的节点。然后，根据记录的节点信息，使用动态规划的方式进行更新，避免了不必要的遍历和比较。

Vue 3相比Vue 2在diff算法上做了以下优化：

  1. 静态模板提升（Static Template Hoisting）：Vue 3使用了基于模板的静态分析技术，可以在编译阶段将静态的模板部分提升为常量，从而减少运行时的diff和渲染开销。
  2. 静态标记（Static Marking）：Vue 3会在编译阶段对模板进行静态标记，将静态节点和动态节点进行区分。这样在diff算法中，Vue 3可以跳过对静态节点的比较和更新，减少了不必要的操作。
  3. 高效的数组更新：Vue 3对数组的更新进行了优化。它使用了类似于React的“key”机制，可以更精确地追踪数组项的变化，并进行最小化的操作。
  4. 缓存事件处理器：Vue 3通过缓存事件处理器的方式，避免了每次更新时重新创建事件处理函数，减少了内存消耗和性能开销。
  5. Patch flag：Vue 3引入了Patch flag的概念，用于标记组件在更新过程中的一些特殊情况，例如组件的props发生变化或只需要强制更新等。这样可以在Diff算法中更快速地定位需要更新的组件，减少了比较的工作量，提高了更新性能。

总之，Vue 3在diff算法上做了多项优化，旨在提高应用程序的性能和用户体验。这些优化包括静态模板提升、静态标记、高效的数组更新、缓存事件处理器和Patch flag等。

3. Vue3初始化的一个大概流程？

Vue3的初始化流程大致如下：

  1. Vue3不再使用new Vue()方法，而是使用createApp()来创建应用实例。在创建应用实例时，可以通过传入的参数rootComponent来指定根组件。
  2. createApp()方法会将rootComponent通过createVnode()方法转化成该组件对应的Vnode。
  3. 然后返回一个mount()函数，在执行这个函数时，会执行传入的render()函数，并把组件Vnode和rootContainer作为参数传入。
  4. 在执行createRenderer()方法后，会返回一个renderer对象，该对象用于创建组件实例和渲染DOM。
  5. 在整个初始化过程中，Vue3还提供了一些钩子函数，例如beforeCreate和created等，这些钩子函数可以在应用实例创建前后进行一些自定义的操作。

总的来说，Vue3的初始化流程相比Vue2更加简洁高效，更有利于构建大型、复杂的单页应用。

4. vue3响应式api

Vue 3的响应式API是通过使用Proxy对象来实现的。在Vue 3中，响应式系统主要由两个函数组成：reactive()和ref()。

reactive()函数用于创建一个响应式对象。它接受一个普通的对象或一个构造函数作为参数，并返回一个响应式对象。在Vue 3中，响应式对象是使用Proxy对象创建的，因此可以拦截对对象的属性访问和修改操作。当属性被访问或修改时，Vue 3会自动更新相关的组件。

下面是一个使用reactive()函数创建响应式对象的示例：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'John'
})

console.log(state.count) // 0

state.count++ // 更新状态

console.log(state.count) // 1

ref()函数用于创建一个响应式引用。它接受一个值作为参数，并返回一个响应式引用对象。响应式引用对象可以用来包装一个普通的值，使其成为响应式的。在Vue 3中，可以使用ref()`函数来包装一个值，并将其传递给组件的props属性，以便在组件中使用。

下面是一个使用ref()函数创建响应式引用的示例：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++ // 更新状态

console.log(count.value) // 1

需要注意的是，在Vue 3中，响应式对象和响应式引用都是使用Proxy对象创建的，因此可以拦截对它们的属性访问和修改操作。当属性被访问或修改时，Vue 3会自动更新相关的组件。

5. Vue3.0编译做了哪些优化？

Vue 3.0在编译阶段进行了多项优化，包括：

  1. 静态模板提升：通过在编译阶段对静态模板的分析，将模板中的静态部分提取出来并提升为常量，以减少运行时的diff计算和渲染开销。
  2. 生成Block tree：Vue 3.0在编译阶段生成了Block tree，将模板基于动态节点指令切割成嵌套的区块。每个区块内部的节点结构是固定的，只有追踪自身包含的动态节点，从而减少了不必要的比较和更新。这使得渲染效率不再与模板大小成正相关，而是与模板中动态节点的数量成正相关。
  3. 优化slot生成：Vue 3.0优化了slot的生成机制，使得非动态slot中属性的更新只会触发子组件的更新，减少了不必要的组件更新。
  4. diff算法优化：Vue 3.0在diff算法上也进行了优化，包括使用Proxy对象来重写响应式系统，以拦截属性的访问和修改操作，快速找到动态节点并触发更新。此外，还引入了缓存事件处理函数和Patch flag等机制，进一步提高了虚拟DOM diff的性能。

总之，Vue 3.0在编译阶段进行的优化旨在提高应用程序的性能和用户体验。这些优化包括静态模板提升、生成Block tree、优化slot生成和diff算法优化等。

avatar
文章
阅读
粉丝