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函数中进行使用。以下是详细的步骤:

  1. 定义组件的Props:

使用defineProps函数来定义组件的Props,并指定其类型、默认值等属性。

import { defineComponent, defineProps } from 'vue';

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

export default MyComponent;

  1. 使用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的主要不同在于组织组件逻辑的方式:

  1. Options API(Vue 2):

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

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

  1. 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进行组件通信的步骤:

  1. 在祖先组件(通常是父组件)中使用provide来提供数据:
import { provide } from 'vue';

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

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

  1. 在后代组件(通常是孙子组件)中使用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中是如何工作的:

  1. reactive函数:

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

import { reactive } from 'vue';

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

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

  1. 访问响应式数据:

当访问响应式对象的属性时,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>

  1. 修改响应式数据:

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

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

  1. 响应式数据的嵌套:

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

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

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组件可以让我们在异步组件加载时显示一个占位符,并且在加载完成之前处理异步组件的错误。

主要用途:

  1. 异步组件加载的占位符:当我们在Vue 3中使用异步组件时,异步组件的加载需要一定时间。在这段时间内,我们可以使用Suspense组件来显示一个占位符,告诉用户正在加载组件内容。

  2. 异步组件加载的错误处理:如果异步组件加载失败,Suspense组件可以捕获并处理加载错误。这样我们可以显示一个友好的错误信息,而不会影响其他部分的页面渲染。

使用Suspense组件的步骤:

  1. 在异步组件的父组件中使用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>

  1. 在Suspense组件的default插槽中定义占位符,即在异步组件加载完成之前显示的内容。

  2. 在Suspense组件的fallback插槽中定义错误处理内容,即当异步组件加载失败时显示的内容。

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

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

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

  1. 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>

  1. reactive:

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

import { reactive } from 'vue';

const person = reactive({
  name'Alice',
  age30,
});
// 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都用于监视响应式数据的变化,但它们在使用和行为上有一些区别。

  1. 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>

  1. 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>

总结:

  • watchEffect是一个自执行函数,它会自动追踪函数体内使用的响应式数据,并在数据变化时自动执行。
  • watch是一个有特定侦听目标的函数,你需要明确指定要监视的响应式数据,并在数据变化时执行特定的回调函数。
  • watchEffect适用于处理副作用,而watch适用于特定的数据监视和操作。


原文始发于微信公众号(前端大大大):2023前端面试之Vue3基础

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/174203.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!