2023前端面试之Vue3基础

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

更快的渲染性能：Vue 3使用了新的响应式系统，提高了性能。
更小的体积：Vue 3通过优化打包方式和Tree-shaking等技术减小了体积。
Composition API：引入了Composition API，使组件逻辑更易于维护和重用。
更好的TypeScript支持：Vue 3对TypeScript的支持更加友好。

Vue 3中如何处理组件的Props？

在Vue 3中，处理组件的Props与Vue 2有一些不同。在Vue 3中，你可以使用defineProps函数来定义组件的Props，然后在setup函数中进行使用。以下是详细的步骤：

定义组件的Props：

使用defineProps函数来定义组件的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;

使用Props：

在setup函数中，你可以通过props参数来访问组件的Props。Vue 3会自动将Props变成响应式数据，因此你可以直接访问它们。

在模板中，也可以像Vue 2一样使用props来访问Props。

<template>
  <div>
    <p>propA: {{ props.propA }}</p>
    <p>propB: {{ props.propB }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    // props定义...
  },
  setup(props) {
    // 使用props...
    return { props };
  },
});
</script>

总结一下，Vue 3中处理组件的Props主要有两个步骤：首先在组件选项中使用defineProps来定义Props的类型和默认值，然后在setup函数中使用props参数来访问和使用这些Props。这样做可以使代码更加清晰、简洁，并且利用了Composition API的优势。

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

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

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

Options API（Vue 2）：

Options API是Vue 2中常用的组织组件逻辑的方式，它将组件选项（data、methods、computed、watch等）集中在一个对象中。当组件较为简单时，Options API表现良好，但随着组件复杂性的增加，这种方式可能导致选项过多，使得代码难以维护。

export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
  watch: {
    count(newVal, oldVal) {
      // watch逻辑
    },
  },
};

Composition API（Vue 3）：

Composition API将组件逻辑按照功能相关性进行组织，让我们可以更灵活地组织代码，使得代码更易于维护和重用。使用Composition API，我们可以使用setup函数来编写组件逻辑，并可以将相关的代码逻辑放在一起。

import { ref, computed, watch } from 'vue';

export default {
  setup() {
    // 响应式数据
    const count = ref(0);

    // 方法
    function increment() {
      count.value++;
    }

    // 计算属性
    const doubleCount = computed(() => count.value * 2);

    // 监听器
    watch(count, (newVal, oldVal) => {
      // watch逻辑
    });

    // 返回数据和方法，以便在模板中使用
    return {
      count,
      increment,
      doubleCount,
    };
  },
};

通过使用Composition API，我们可以更自由地组织组件逻辑，而不再受限于Options API的选项集中方式。这样可以使得代码更具结构化，也更便于跨组件重用逻辑。另外，Composition API也更好地支持TypeScript，使得类型推导更加准确。

总结：Composition API是Vue 3中的一项新特性，它与Options API相比，更加灵活、组织性更强，更易于维护和重用组件逻辑。对于复杂的组件或大型项目，推荐使用Composition API来开发。

Vue 3中如何进行组件之间的通信？

在Vue 3中，你可以使用provide和inject来进行组件之间的通信。provide和inject提供了一种祖先组件向后代组件传递数据的方式，不需要通过props进行传递。这种通信方式主要适用于跨层级的组件通信，比如父组件向孙子组件传递数据。

以下是使用provide和inject进行组件通信的步骤：

在祖先组件（通常是父组件）中使用provide来提供数据：

import { provide } from 'vue';

export default {
  setup() {
    // 要传递的数据
    const sharedData = '这是共享的数据';

    // 使用provide提供数据，可以是一个对象或多个值
    provide('sharedData', sharedData);
  },
};

在后代组件（通常是孙子组件）中使用inject来接收数据：

import { inject } from 'vue';

export default {
  setup() {
    // 使用inject接收数据，参数是要接收的数据名称
    const sharedData = inject('sharedData');

    // 可以在后代组件中使用sharedData了
    console.log(sharedData);
  },
};

注意事项：

provide和inject不是响应式的，因此不能直接在模板中使用。 provide和inject主要适用于高层级的组件向低层级的组件传递数据。对于兄弟组件之间的通信，建议使用其他方法，比如使用一个共享的状态管理库（如Vuex）或通过父组件作为中介传递数据。

总结：在Vue 3中，你可以使用provide和inject来进行组件之间的通信，特别适用于祖先组件向后代组件传递数据。这种通信方式可以方便地将数据传递给多个后代组件，但需要注意不要滥用，保持数据传递的合理性和可维护性。

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

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

以下是响应式数据在Vue 3中是如何工作的：

reactive函数：

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

import { reactive } from 'vue';

const data = reactive({
  count: 0,
  message: 'Hello, Vue 3!',
});

// data现在是一个响应式对象

访问响应式数据：

当访问响应式对象的属性时，Vue 3会进行依赖追踪，将当前正在执行的代码（如模板、计算属性、watch等）与这些属性关联起来。

<template>
  <div>
    <p>Count: {{ data.count }}</p>
    <p>Message: {{ data.message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({
      count: 0,
      message: 'Hello, Vue 3!',
    });

    return {
      data,
    };
  },
};
</script>

修改响应式数据：

当修改响应式对象的属性时，Vue 3会自动触发更新，重新渲染受影响的视图。

data.count++; // 触发更新，重新渲染视图
data.message = 'Vue 3 is awesome!'; // 触发更新，重新渲染视图

响应式数据的嵌套：

reactive函数是递归的，它会将对象的所有嵌套属性都转换为响应式对象，从而实现深层次的响应式数据。

const nestedData = reactive({
  person: {
    name: 'Alice',
    age: 30,
  },
});

nestedData.person.age++; // 触发更新，重新渲染视图

总结：在Vue 3中，响应式数据是通过reactive函数来实现的。reactive函数将普通的JavaScript对象转换为响应式对象，使用Proxy对象拦截属性访问和修改操作，从而实现依赖追踪和自动更新视图的响应式效果。这是Vue 3实现数据驱动视图的重要机制之一。

Vue 3中的teleport是什么？有什么作用？

在Vue 3中，teleport是一种新的特性，它允许你将组件的内容渲染到任意目标元素之外的位置。这个特性之前在Vue 2中被称为portals。

teleport的作用是在组件中创建一个包含内容的”传送门”，将这个内容渲染到DOM中的另一个位置，通常是在组件的外部。这样做的好处是，你可以在DOM结构的任何地方渲染组件的内容，而不受组件嵌套层级的限制。

teleport是在开发复杂组件时非常有用的功能，特别是在需要在应用的不同位置渲染相同组件内容的情况下。例如，在弹出式窗口、对话框、模态框或全局通知的实现中，teleport能够帮助我们更灵活地控制组件的位置。

要使用teleport，首先需要在Vue 3中导入Teleport组件，然后在组件模板中使用<Teleport>标签，并通过to属性指定要传送的目标元素的选择器。

示例：

<template>
  <div>
    <!-- 通过teleport将弹窗内容渲染到body之外 -->
    <Teleport to="#popup-container">
      <div class="popup">
        <!-- 弹窗内容 -->
        <h2>{{ title }}</h2>
        <p>{{ content }}</p>
      </div>
    </Teleport>
  </div>
</template>

<script>
import { Teleport } from 'vue';

export default {
  components: {
    Teleport,
  },
  props: {
    title: String,
    content: String,
  },
};
</script>

在上述示例中，<Teleport>标签将组件的内容渲染到ID为popup-container的元素之外。这样可以在应用的任何位置使用这个组件，并通过teleport指定要渲染的位置。

总结：teleport是Vue 3中的一个特性，它允许我们在组件中创建传送门，将组件内容渲染到DOM中的任意位置，这在处理弹出式窗口、模态框等场景时非常有用。使用teleport，我们可以更加灵活地控制组件内容的位置，而不受组件嵌套层级的限制。

Vue 3中的Suspense是什么？它的主要用途是什么？

在Vue 3中，Suspense是一个新的特性，它用于处理异步组件的加载和错误处理。Suspense组件可以让我们在异步组件加载时显示一个占位符，并且在加载完成之前处理异步组件的错误。

主要用途：

异步组件加载的占位符：当我们在Vue 3中使用异步组件时，异步组件的加载需要一定时间。在这段时间内，我们可以使用Suspense组件来显示一个占位符，告诉用户正在加载组件内容。
异步组件加载的错误处理：如果异步组件加载失败，Suspense组件可以捕获并处理加载错误。这样我们可以显示一个友好的错误信息，而不会影响其他部分的页面渲染。

使用Suspense组件的步骤：

在异步组件的父组件中使用Suspense组件，并指定v-slot来定义占位符和错误处理的内容。

<template>
  <Suspense>
    <template v-slot:default>
      <!-- 异步组件的占位符 -->
      <div>Loading...</div>
    </template>
    <template v-slot:fallback>
      <!-- 异步组件加载失败的错误处理 -->
      <div>Error! Failed to load the component.</div>
    </template>
    <!-- 异步组件加载的地方 -->
    <AsyncComponent />
  </Suspense>
</template>

<script>
// 异步组件
const AsyncComponent = () => import('./AsyncComponent.vue');

export default {
  components: {
    AsyncComponent,
  },
};
</script>

在Suspense组件的default插槽中定义占位符，即在异步组件加载完成之前显示的内容。
在Suspense组件的fallback插槽中定义错误处理内容，即当异步组件加载失败时显示的内容。

总结：Suspense是Vue 3中的一个特性，用于处理异步组件的加载和错误处理。通过Suspense组件，我们可以在异步组件加载时显示一个占位符，提供更好的用户体验，并且在异步组件加载失败时进行错误处理，避免影响其他部分的页面渲染。使用Suspense可以更方便地处理异步组件，使代码更加简洁和易读。

Vue 3中的ref和reactive有何区别？什么时候使用它们？

在Vue 3中，ref和reactive都是用于创建响应式数据的函数，但它们在使用和适用场景上有一些区别。

ref:

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

import { ref } from 'vue';

const count = ref(0);
// count是一个响应式引用对象 { value: 0 }

在模板中使用ref：

<template>
  <div>
    <p>Count: {{ count.value }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
};
</script>

reactive：

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

import { reactive } from 'vue';

const person = reactive({
  name: 'Alice',
  age: 30,
});
// person是一个响应式对象

在模板中使用reactive：

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const person = reactive({
      name: 'Alice',
      age: 30,
    });
    return {
      person,
    };
  },
};
</script>

适用场景：

使用ref：适用于简单的数据，比如基本类型数据（如数字、字符串等）或单一的引用类型数据（如对象、数组等）。
使用reactive：适用于复杂的数据结构，比如嵌套的对象或数组，或需要响应式地追踪整个数据结构变化的情况。

通常情况下，我们可以使用ref和reactive来创建响应式数据。对于简单的数据，使用ref会更加方便，而对于复杂的数据结构，使用reactive会更加灵活。Vue 3还提供了其他的API来处理不同的数据需求，如computed用于创建计算属性、watch用于监听数据变化等，根据具体情况选择适合的API来创建和处理响应式数据。

Vue 3中的watchEffect和watch有何区别？

在Vue 3中，watchEffect和watch都用于监视响应式数据的变化，但它们在使用和行为上有一些区别。

watchEffect：

watchEffect是一个自执行的函数，它会立即执行一次，并在函数体内自动追踪响应式数据的变化。
watchEffect不需要显式地指定要监视的数据，它会自动捕获函数体内使用的响应式数据，并在这些数据发生变化时重新执行函数。
watchEffect适用于处理副作用，比如在函数内执行异步操作、更新DOM等。

示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // watchEffect自动追踪count的变化，并在每次变化时执行
    watchEffect(() => {
      console.log('Count changed:', count.value);
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};
</script>

watch：

watch是一个有特定侦听目标的函数，你需要明确指定要监视的数据。
watch的回调函数接收两个参数：新值和旧值，你可以根据需要在回调函数中进行相应的操作。
watch适用于监视特定的响应式数据，并在数据变化时执行特定的操作。

示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // watch函数监视count的变化，并在每次变化时执行回调函数
    watch(count, (newValue, oldValue) => {
      console.log('Count changed:', newValue, 'from', oldValue);
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};
</script>