[Vue3] 基础面试 (一)

1.Vue 3相对于Vue 2有哪些主要改进

1. 更快的渲染性能: Vue 3使用了新的响应式系统, 提高了性能。
2. 更小的体积: Vue 3通过优化打包方式和Tree-shaking等技术减小了体积。
3. Composition API: Composition可以使逻辑易于维护和重用。
4. TypeScript支持: Vue3对TS的支持更友好。

2.Vue 3中如何处理组件的Props

使用defineProps函数来定义组件的Props, 然后在setup函数中使用。

1.定义组件的Props

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  props: {
    propA: String, // 指定propA的类型为String
    propB: {
      type: Number, // 指定propB的类型为Number
      default: 0, // 指定propB的默认值为0
    },
    // 其他Props...
  },
  setup(props) {
    // 在setup函数中可以使用props
    console.log(props.propA); // 访问propA的值
    console.log(props.propB); // 访问propB的值
    // ...
  },
});

export default MyComponent;

3.Vue 3中的Composition API是什么, 它与Options API有何不同

Vue 3中的Composition API是一种新的组织组件逻辑的方式, 与Vue 2中的Options API有很大的不同。Composition API是Vue 3引入的一项重要特性。旨在提高组件的可读性、可维护性和重用性。

Composition API与Options API的主要不同在于组织组件逻辑的方式:

1. Options API是Vue 2中常用的组织组件逻辑的方式, 它将组件选项(data, methods, computed, watch)集中一个对象中, 当组件较为简单时, Options API良好, 不过随着组件复杂性的增加, 这种方式导致选项过多, 代码难以维护。
2. Composition API将组件逻辑按照功能相关性进行组织, 可以使得代码更加易于维护和重用, 可以使用setup函数来编写组件逻辑, 使得相关的代码逻辑放一起。
3. 通过Composition API, 可以不再受限于Options API的选项集中方式。这样可以使得代码更具结构化, 也更便于跨组件重用逻辑。Composition API更好的支持TS。

4.Vue 3中的响应式数据是如何工作的

响应式数据是通过使用reactive函数来实现的。reactive函数是Vue 3中的一个核心函数, 它可以将普通的JavaScript对象转换为响应式对象。

reactive函数接收一个普通的JavaScript对象作为参数, 返回一个响应式的Proxy对象, Proxy对象会拦截对对象属性的访问和修改操作, 从而在访问或修改属性时触发依赖追踪, 实现响应式。

5.Vue 3中的ref和reactive有何区别

ref和reactive都是用于创建响应式数据的函数

1. ref函数用于创建一个简单的响应式引用对象, 它接收一个初始值作为参数, 返回一个包含value属性的对象。模板中需要.value访问值。

2. reactive函数用于创建一个包含复杂数据结构的响应式对象。它接收一个普通的JavaScript对象作为参数, 返回一个包含Proxy代理的响应式对象, reactive能够追踪整个对象及其嵌套属性的变化。

3. 使用ref, 适用于简单数据, 比如基本数据类型(数字, 字符串)或单一的引用类型数据。
4. 使用reactive: 适用于复杂数据, 比如嵌套的对象或数组, 或需要响应式地追踪整个数据结构变化的情况。

6.Vue 3中的watchEffect和watch有何区别

watchEffect和watch都用于监视响应式数据的变化, 用法和使用上有一点区别。

1. watchEffect是一个自执行的函数, 会立刻执行一次, 并在函数体内自动追踪响应式数据的变化。

2. watchEffect不需要显式地指定要监视的数据, 会自动捕获函数体内使用的响应式数据, 在这些数据发生变化的时候执行函数。

3. watchEffect适用于处理副作用, 比如函数内执行异步操作, 更新dom操作。

4. watch是一个有特定侦听目标的函数, 需要明确监听的数据。

5. watch的回调函数接收两个参数, 旧和新值, watch适用于监视特定的响应式数据, 在数据变化时执行特定的操作。

6. watchEffect适用于处理副作用, watch适用于特定的数据监视和操作。