Vue3对比Vue2功能相关面试题

sym001
125 阅读10分钟

对vue3进行全面讲解。包括 Vue3 升级的变动，Vue3 核心知识点，Composition API 如何使用，以及 Vue3 一些基础的原理。

一、Vue3比Vue2有什么优势

  1. 更快的渲染速度：Vue3使用了Proxy对象来代替Vue2中的Object.defineProperty，提高了响应式系统的性能，同时也优化了编译器和虚拟DOM的实现，使得渲染速度更快。

  2. 更小的体积：Vue3的体积比Vue2更小，同时还提供了tree-shaking支持，使得只有用到的部分才会被打包进最终的代码中，减少了应用程序的体积。

  3. 更好的TypeScript支持：Vue3对TypeScript的支持更加完善，包括对组件、指令、插件等的类型定义，使得代码的可读性和可维护性更高。

  4. 更好的组合API：Vue3提供了更好的组合API，使得组件的逻辑更加清晰，可复用性更高，同时也更容易进行单元测试和调试。

  5. 更好的错误处理：Vue3在错误处理方面也进行了优化，包括更好的错误提示和更好的错误边界处理，使得应用程序的健壮性更高。

二、Vue3生命周期

Vue3的生命周期相比Vue2有所改变，主要是将原来的beforeCreate和created合并为一个新的生命周期函数setup。下面是Vue3中的生命周期函数：

  1. setup：在组件实例化之前执行，可以用来进行组件的初始化设置，包括响应式数据、计算属性、方法等的声明。

  2. beforeMount：在组件挂载到DOM之前执行。

  3. onMounted：在组件挂载到DOM之后执行。

  4. beforeUpdate：在组件更新之前执行。

  5. onUpdated：在组件更新之后执行。

  6. beforeUnmount：在组件卸载之前执行。

  7. onUnmounted：在组件卸载之后执行。

  8. onErrorCaptured：在捕获子组件错误时执行。

需要注意的是，Vue3中去掉了activated和deactivated这两个生命周期函数，因为在Vue3中，keep-alive组件被重构为一个内置组件，不再需要手动管理缓存的组件状态。

三、Composition API对比Options API

Composition API和Options API都是Vue.js提供的开发API，但它们在使用方式和设计理念上有所不同。

Options API是Vue.js早期版本中使用的API，它通过在Vue组件中定义不同的选项来描述组件的行为。例如，可以通过定义data、methods、computed、watch等选项来描述组件的状态、行为和响应式数据。Options API的优点是易于理解和学习，但是当组件变得复杂时，选项会变得越来越多，导致代码难以维护和理解。

Composition API是Vue.js 3.0中引入的新API，它通过将相关逻辑组合成可复用的逻辑块来描述组件的行为。Composition API的优点是代码可复用性强，逻辑清晰，可以更好地组织和管理组件的逻辑。同时，Composition API还提供了更好的类型推断和IDE支持。

总的来说，Options API适用于简单的组件，而Composition API适用于更复杂的组件和更大规模的应用程序。

四、如何理解ref toRef和toRefs

ref、toRef和toRefs都是Vue 3中的响应式API。

  1. ref：ref函数可以将一个普通的数据转换为响应式的数据。ref函数返回的是一个对象，对象中有一个value属性，该属性的值是响应式的。当value属性的值发生变化时，相关的组件会自动更新。

  2. toRef：toRef函数可以将一个响应式对象的属性转换为一个新的响应式对象。toRef函数接收两个参数，第一个参数是响应式对象，第二个参数是响应式对象的属性名。toRef函数返回一个新的响应式对象，该对象只有一个属性，即传入的属性名。

  3. toRefs：toRefs函数可以将一个响应式对象转换为多个响应式对象。toRefs函数接收一个响应式对象作为参数，返回一个对象，该对象的属性是响应式对象的属性，值是一个新的响应式对象，只有一个属性，即传入的属性名。

举个例子：

import { ref, toRef, toRefs } from 'vue';

const state = {
  name: 'Tom',
  age: 18
};

// ref
const name = ref(state.name);
name.value = 'Jerry';

// toRef
const ageRef = toRef(state, 'age');
ageRef.value = 20;

// toRefs
const refs = toRefs(state);
refs.name.value = 'Jerry';
refs.age.value = 20;

在上面的例子中，我们通过ref函数将state.name转换为响应式数据，并且可以通过name.value来修改值。通过toRef函数将state.age的属性转换为响应式对象，并且可以通过ageRef.value来修改值。通过toRefs函数将整个state对象转换为多个响应式对象，可以通过refs.name.value和refs.age.value来分别修改值。

五、为何需要.value

在Vue 3中，使用ref函数创建的响应式数据是一个包装对象，该对象包含一个value属性，该属性的值是响应式的。因此，在访问和修改响应式数据时，需要使用.value来访问和修改value属性的值。

例如，我们创建一个响应式数据：

import { ref } from 'vue';

const count = ref(0);

如果我们想要访问和修改count的值，需要使用.value：

// 访问count的值
console.log(count.value); // 输出0

// 修改count的值
count.value = 1;
console.log(count.value); // 输出1

这是因为，ref函数返回的是一个包装对象，而不是简单的值类型。这个包装对象有一个value属性，该属性的值是响应式的。因此，我们需要使用.value来访问和修改这个属性的值。这样，Vue 3才能够追踪响应式数据的变化，并更新相关的组件。

六、vue3升级了哪些重要功能

1、creatApp

image.png

2、emits属性

image.png

3、生命周期

增加了setup函数，包含Vue生命周期函数。

4、多事件

image.png

5、Fragment

image.png

6、移除.aync

image.png

7、异步组件的写法

image.png

8、移除filter

image.png

9、Teleport

image.png

10、Suspense

image.png

11、Composition API

image.png

七、Vue3如何实现响应式

Vue 3使用了Proxy API来实现响应式。Proxy是ES6中新增的一个API，可以用来拦截对象的访问、赋值、删除等操作，从而实现对对象的监控和控制。在Vue 3中，每个响应式数据都被封装成一个Proxy对象，当我们对这个对象进行访问、赋值等操作时，Vue会自动捕获这些操作，并触发响应式更新。

另外，Vue 3还引入了一个新的Reactivity API，包括了一组函数，如reactive、ref、toRef、toRefs等，可以帮助我们更方便地创建响应式数据。其中，reactive函数可以将一个普通对象转换为响应式对象，ref函数可以将一个普通值转换为响应式对象，toRef和toRefs函数可以将一个普通对象中的属性转换为响应式对象。

八、watch和watchEffect的区别

watch和watchEffect都是Vue 3中用于监听响应式数据变化的API，如果需要监听多个数据或需要获取变化前后的值，可以使用watch；如果只需要监听函数内部使用的响应式数据，可以使用watchEffect。

九、setup中如何获取组件实例

组件实例可以通过getCurrentInstance()函数在setup()函数中获取。这个函数返回的是一个ComponentInstance对象，包含了当前组件实例的所有信息，包括组件的属性、方法、生命周期钩子等等。

十、Vue3为何比Vue2快

  1. 编译器优化：Vue 3的编译器对模板编译进行了优化，生成的代码更加简洁高效，减少了不必要的运算和内存分配，提升了渲染性能。

  2. 静态提升：Vue 3中引入了静态提升（Static Hoisting）的概念，将静态节点在编译时提升为常量，避免了每次渲染时的重复计算和创建，大大减少了渲染时间和内存占用。

  3. 静态节点缓存：Vue 3中引入了静态节点缓存（Static Caching）的概念，将静态节点缓存起来，避免了重复创建和销毁，提升了渲染性能。

  4. Diff算法优化：Vue 3中对Diff算法进行了优化，使用更高效的算法和数据结构，减少了比较次数和时间复杂度，提升了渲染性能。

  5. Tree-shaking：Vue 3中对组件的代码进行了Tree-shaking，只打包使用到的组件代码，减小了打包体积，提升了加载速度。

  6. Typescript支持：Vue 3对Typescript的支持更加完善，可以更好地进行类型检查和优化，提升了代码质量和性能。

十一、Vite为什么启动非常快

Vite 之所以启动非常快，主要是因为它采用了原生 ES 模块导入的方式，而不是像 Webpack 那样使用打包后的文件。Vite 在启动时会创建一个本地服务器，在浏览器中访问时，会通过浏览器原生支持的 ES 模块导入方式，直接从本地服务器中获取模块，而不需要像 Webpack 那样先将所有的模块打包成一个文件，然后再通过浏览器解析。这样就避免了 Webpack 在启动时需要处理大量文件的情况，从而大大减少了启动时间。另外，Vite 还使用了缓存机制，可以在修改代码后，只重新编译修改的文件，而不需要重新编译整个项目，也可以大大提高开发效率。

十二、Vue3如何实现代码逻辑复用

  1. Mixins：Mixins 是一种将多个组件中共用的代码抽离出来，然后将其混合到组件中的技术。在 Vue 3 中，可以使用 mixins 函数来定义一个 Mixin，然后在组件中使用 mixins 选项来混入该 Mixin。需要注意的是，Vue 3 中 Mixin 的优先级比 Vue 2 中更高，如果多个 Mixin 中有相同的选项，那么后面的 Mixin 会覆盖前面的 Mixin。

  2. Composition API：Composition API 是 Vue 3 中新增的一种 API 风格，它可以将一个组件的逻辑拆分成多个函数，然后将这些函数组合成一个逻辑单元。在组件中，可以使用 setup 函数来使用 Composition API，将多个逻辑单元组合成一个逻辑整体。

十三、Composition API和React Hooks 的对比

Composition API 和 React Hooks 都是用于在函数组件中复用代码逻辑的技术。它们的实现方式和使用方法有些类似，但也有一些不同之处：

  1. 命名方式：Composition API 中使用 ref、reactive、computed 等函数来定义响应式数据和计算属性，而 React Hooks 中使用 useState、useEffect、useContext 等 Hook 函数来定义状态和副作用。

  2. 代码组织方式：Composition API 中可以将一个组件的逻辑拆分成多个函数，然后将这些函数组合成一个逻辑单元，从而实现代码逻辑的复用。而 React Hooks 则是将状态和副作用等逻辑抽离出来，然后将其作为函数组件的一部分，从而实现代码逻辑的复用。

  3. 对比优势：Composition API 相比 React Hooks 在类型支持方面更加强大，因为 Vue 3 中使用 TypeScript 来编写代码时，可以对 Composition API 中的函数进行类型推导。而 React Hooks 相比 Composition API 在社区支持和生态方面更加丰富，因为 React Hooks 已经被广泛应用于 React 生态系统中，有更多的开源库和工具可以使用。

avatar
文章
阅读
粉丝