Vue3 Selected Interview Questions

What new features do you know about Vue 3?#

What are the communication methods between Vue components?#

How to get the component instance in Vue 3? How to customize the template reference name?#

What is the difference between ref and reactive in Vue 3?#

How to destructure a reactive object in Vue 3 without losing reactivity?#

How to handle cross-origin issues in a Vue 3 project?#

answer

Reference reply:

Enable CORS on the backend to allow cross-origin requests.
Use vite.config.js to configure a proxy; most commonly used.

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
}

How to implement dynamic components in Vue 3?#

What event modifiers are available in Vue 3?#

answer

Reference reply:

Modifier	Effect
stop	Calls event.stopPropagation(), preventing event bubbling.
prevent	Calls event.preventDefault(), preventing default event behavior (e.g., form submission).
capture	Triggers the event in the capture phase instead of the bubbling phase.
self	Triggers the event only when the event source is the current element, not triggering child element events.
...

How to define component names in the top-level setup of Vue 3?#

answer

Reference reply:

Supported in 3.3+ with defineOptions().
Use the plugin unplugin-vue-setup-extend-plus.

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

<script lang="ts" setup name="App" inheritAttrs="false">
  const a = 1
</script>

How to access child component variables or methods in the top-level setup of Vue 3?#

What are scoped slots?#

answer

Reference reply:

Allows child components to expose data or methods to parent components and dynamically generate content in the parent component.

<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

How to implement transition animations between components?#

How to "deeply" select styles in Vue 3 with scoped?#

How to implement one-time listening and deep listening in Vue 3?#

What is the specific purpose and implementation principle of keep-alive?#

How to implement a custom directive?#

What is Teleport in Vue 3? How to use it?#

answer

Reference reply:

Teleport allows you to render a component's DOM to any position outside the component tree. It solves the DOM hierarchy nesting limitation of Vue components, allowing you to render modals, notifications, tooltips, etc., to any position in the HTML document.

<template>
  <div>
    <h1>Main Content</h1>
    <teleport to="body">
      <div class="modal">This is a modal</div>
    </teleport>
  </div>
</template>

What is Suspense in Vue 3?#

answer

Reference reply:

Used to handle the loading process of asynchronous components. It allows you to display a placeholder content (fallback) before the asynchronous task (such as data loading or asynchronous component resolution) is completed, thus enhancing the user experience.

<template>
  <div>
    <h1>Suspense Example</h1>
    <Suspense>
      <!-- Default slot: Content displayed after loading is complete -->
      <template #default>
        <AsyncComponent />
      </template>

      <!-- Fallback slot: Content displayed during loading -->
      <template #fallback>
        <p>Loading...</p>
      </template>
    </Suspense>
  </div>
</template>

What are the differences between Pinia and Vuex?#

What is the difference between params and query in vue-router?#

How to implement route lazy loading?#

answer

Reference reply:

Route lazy loading is a way to load the corresponding components of routes on demand, which can significantly optimize the initial loading time and improve application performance. It is implemented through dynamic imports (import()).

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // Dynamically import Home component
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'), // Dynamically import About component
  },
];

What is the difference between history mode and hash mode in routing?#

How to implement multi-environment configuration in a Vue project?#

What is the creation and mounting order of Vue child and parent components?#

What are the performance optimization methods in Vue?#

How to uniformly handle interface permission verification and error handling in Vue?#

What are the steps, important plugins, and directory structure you would organize when building a Vue 3 project from scratch?#

This article is synchronized and updated to xLog by Mix Space. The original link is https://kaife.cn/posts/interview/vue

Vue3 Selected Interview Questions

What new features do you know about Vue 3?#

What are the communication methods between Vue components?#

How to get the component instance in Vue 3? How to customize the template reference name?#

What is the difference between ref and reactive in Vue 3?#

How to destructure a reactive object in Vue 3 without losing reactivity?#

How to handle cross-origin issues in a Vue 3 project?#

How to implement dynamic components in Vue 3?#

What event modifiers are available in Vue 3?#

How to define component names in the top-level setup of Vue 3?#

How to access child component variables or methods in the top-level setup of Vue 3?#

What are scoped slots?#

How to implement transition animations between components?#

How to "deeply" select styles in Vue 3 with scoped?#

How to implement one-time listening and deep listening in Vue 3?#

What is the specific purpose and implementation principle of keep-alive?#

How to implement a custom directive?#

What is Teleport in Vue 3? How to use it?#

What is Suspense in Vue 3?#

What are the differences between Pinia and Vuex?#

What is the difference between params and query in vue-router?#

How to implement route lazy loading?#

What is the difference between history mode and hash mode in routing?#

How to implement multi-environment configuration in a Vue project?#

What is the creation and mounting order of Vue child and parent components?#

What are the performance optimization methods in Vue?#

How to handle login state expiration in backend projects?#

How to uniformly handle interface permission verification and error handling in Vue?#

What are the steps, important plugins, and directory structure you would organize when building a Vue 3 project from scratch?#