Vue3 인터뷰 질문: 답변 및 코드 예제가 포함된 연습 질문 20개

Vue3에서 반응형 데이터의 구현 원리는 무엇입니까?

답변: 프록시 객체는 Vue3에서 반응형 데이터를 구현하는 데 사용됩니다. 데이터가 변경되면 프록시가 자동으로 업데이트를 트리거합니다.

const state = {
    
    
  count: 0
}

const reactiveState = new Proxy(state, {
    
    
  set(target, key, value) {
    
    
    target[key] = value
    console.log('数据已更新')
    return true
  }
})

reactiveState.count = 1 // 数据已更新

Vue3의 Composition API는 무엇입니까?

답변: Composition API는 Vue3의 새로운 API로 개발자가 구성 요소 로직을 보다 유연하게 구성하고 재사용할 수 있도록 합니다.

import {
    
     reactive, computed } from 'vue'

export default {
    
    
  setup() {
    
    
    const state = reactive({
    
    
      count: 0
    })

    const doubleCount = computed(() => state.count * 2)

    function increment() {
    
    
      state.count++
    }

    return {
    
    
      state,
      doubleCount,
      increment
    }
  }
}

Vue3에서 사용자 지정 지시문을 사용하는 방법은 무엇입니까?

답변: 메서드는 Vue3에서 사용자 지정 지시문을 정의하는 데 사용됩니다 app.directive. 사용자 지정 지시문은 지시문 후크 함수를 포함하는 개체를 반환해야 합니다.

import {
    
     createApp } from 'vue'

const app = createApp({
    
    })

app.directive('focus', {
    
    
  mounted(el) {
    
    
    el.focus()
  }
})

<template>
  <input v-focus>
</template>

Vue3에서 Teleport 컴포넌트를 사용하는 방법은 무엇입니까?

답변: 컴포넌트는 Vue3에서 포털 기능을 구현하는 데 사용됩니다 <teleport>. <teleport>구성 요소는 전송해야 하는 대상 위치에 배치해야 하며 to속성을 지정해야 합니다.

<template>
  <button @click="showDialog = true">Show Dialog</button>

  <teleport to="body">
    <dialog v-if="showDialog">
      <h1>Dialog Title</h1>
      <p>Dialog Content</p>
      <button @click="showDialog = false">Close</button>
    </dialog>
  </teleport>
</template>

Vue3에서 Suspense 구성 요소를 사용하는 방법은 무엇입니까?

답변: 구성 요소는 Vue3에서 비동기 구성 요소 로드를 위한 자리 표시자를 구현하는 데 사용됩니다 <suspense>. <suspense>구성 요소에서 사용할 <template v-slot>지정된 자리 표시자 콘텐츠가 필요합니다 .

<template>
  <suspense>
    <template v-slot:fallback>
      <div>Loading...</div>
    </template>

    <async-component />
  </suspense>
</template>

교차 수준 구성 요소 통신을 달성하기 위해 Vue3에서 제공 및 주입을 사용하는 방법은 무엇입니까?

대답: Vue3는 교차 수준 구성 요소 통신을 달성하기 위해 사용 provide및 방법을 사용합니다. inject부모 구성 요소의 메서드를 사용하여 provide데이터를 제공하고 자식 구성 요소의 메서드를 사용하여 inject데이터를 주입합니다.

import {
    
     provide, inject } from 'vue'

const Parent = {
    
    
  setup() {
    
    
    const state = reactive({
    
    
      count: 0
    })

    provide('state', state)

    return {
    
    
      state
    }
  }
}

const Child = {
    
    
  setup() {
    
    
    const state = inject('state')

    return {
    
    
      state
    }
  }
}

Vue3에서 watchEffect 메서드를 사용하는 방법은 무엇입니까?

답변: Vue3는 watchEffect응답 데이터의 변경 사항을 모니터링하고 데이터가 변경되면 자동으로 기능을 실행하는 메서드를 사용합니다.

import {
    
     watchEffect } from 'vue'

const state = reactive({
    
    
  count: 0
})

watchEffect(() => {
    
    
  console.log(state.count)
})

Vue3에서 감시 방법을 사용하는 방법은 무엇입니까?

답변: Vue3는 watch응답 데이터의 변경 사항을 모니터링하고 데이터가 변경되면 콜백 함수를 실행하는 메서드를 사용합니다.

import {
    
     watch } from 'vue'

const state = reactive({
    
    
  count: 0
})

watch(() => state.count, (newValue, oldValue) => {
    
    
  console.log(newValue, oldValue)
})

Vue3에서 계산된 메서드를 사용하는 방법은 무엇입니까?

답변: 계산된 속성을 생성하기 위해 Vue3에서 메소드가 사용됩니다 computed. 계산된 속성은 반응성 데이터의 변경 사항에 따라 자동으로 업데이트될 수 있습니다.

import {
    
     computed } from 'vue'

const state = reactive({
    
    
  count: 0
})

const doubleCount = computed(() => state.count * 2)

console.log(doubleCount.value) // 0

state.count = 1

console.log(doubleCount.value) // 2

Vue3에서 ref 메서드를 사용하는 방법은 무엇입니까?

답변: Vue3는 ref반응형 데이터에 대한 참조를 생성하는 메서드를 사용합니다. 참조 값은 를 통해 액세스하고 수정할 수 있습니다 .value.

import {
    
     ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++

console.log(count.value) // 1

Vue3에서 반응형 방법을 사용하는 방법은 무엇입니까?

답변: Vue3는 reactive반응형 데이터 객체를 생성하기 위해 메서드를 사용합니다. 개체 속성은 변경 사항에 대해 자동으로 모니터링됩니다.

import {
    
     reactive } from 'vue'

const state = reactive({
    
    
  count: 0
})

console.log(state.count) // 0

state.count++

console.log(state.count) // 1

Vue3에서 toRefs 메서드를 사용하는 방법은 무엇입니까?

답변: Vue3는 toRefs반응형 데이터 개체의 속성을 반응형 데이터 참조로 변환하는 메서드를 사용합니다.

import {
    
     reactive, toRefs } from 'vue'

const state = reactive({
    
    
  count: 0
})

const refs = toRefs(state)

console.log(refs.count.value) // 0

state.count++

console.log(refs.count.value) // 1

createApp 메소드를 사용하여 Vue3에서 Vue 인스턴스를 생성하는 방법은 무엇입니까?

답변: Vue3는 createApp메소드를 사용하여 Vue 인스턴스를 생성하고 mount메소드를 사용하여 인스턴스를 DOM에 마운트합니다.

import {
    
     createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

Vue3에서 컴포넌트를 정의하기 위해 defineComponent 메서드를 사용하는 방법은 무엇입니까?

답변: Vue3는 defineComponent메소드를 사용하여 컴포넌트를 정의하고 setup메소드를 사용하여 컴포넌트 로직을 작성합니다.

import {
    
     defineComponent } from 'vue'

export default defineComponent({
    
    
  props: {
    
    
    name: String
  },

  setup(props) {
    
    
    const message = `Hello, ${
      
      props.name}!`

    return {
    
    
      message
    }
  }
})

Vue3에서 전역 상태 관리를 구현하기 위해 제공 및 주입 방법을 사용하는 방법은 무엇입니까?

답변: Vue3는 전역 상태 관리를 구현하기 위해 사용 provide하고 inject방법을 사용합니다. 루트 구성 요소의 메서드를 사용하여 provide전역 상태를 제공하고 다른 구성 요소의 메서드를 사용하여 inject전역 상태를 주입할 수 있습니다.

import {
    
     provide, inject } from 'vue'

const app = createApp(...)

const globalState = reactive({
    
    
  count: 0
})

app.provide('globalState', globalState)

const Child = {
    
    
  setup() {
    
    
    const state = inject('globalState')

    return {
    
    
      state
    }
  }
}

createRouter 메소드를 사용하여 Vue3에서 라우팅 인스턴스를 생성하는 방법은 무엇입니까?

답변: Vue3는 createRouter라우팅 인스턴스를 생성하는 방법을 사용하고 use라우팅 인스턴스를 Vue 인스턴스에 설치하는 방법을 사용합니다.

import {
    
     createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes: [
    {
    
    
      path: '/',
      component: Home
    },
    {
    
    
      path: '/about',
      component: About
    }
  ]
})

const app = createApp(...)

app.use(router)

createStore 메소드를 사용하여 Vue3에서 Vuex 인스턴스를 생성하는 방법은 무엇입니까?

답변: Vue3에서는 createStoreVuex 인스턴스를 생성하는 메서드를 사용하고, provideVue 인스턴스에 인스턴스를 주입하는 메서드를 사용합니다.

import {
    
     createStore } from 'vuex'

const store = createStore({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    increment(state) {
    
    
      state.count++
    }
  }
})

const app = createApp(...)

app.provide('store', store)

const Child = {
    
    
  setup() {
    
    
    const store = inject('store')

    return {
    
    
      store
    }
  }
}

Vue3에서 비동기 구성 요소를 생성하기 위해 defineAsyncComponent 메서드를 사용하는 방법은 무엇입니까?

답변: Vue3는 defineAsyncComponent메서드를 사용하여 비동기 구성 요소를 생성하고 import명령문을 사용하여 구성 요소 파일을 로드합니다.

import {
    
     defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

export default {
    
    
  components: {
    
    
    AsyncComponent
  }
}

createSSRApp 메서드를 사용하여 Vue3에서 서버 측 렌더링 인스턴스를 생성하는 방법은 무엇입니까?

답변: Vue3는 createSSRApp메소드를 사용하여 서버 측 렌더링 인스턴스를 생성하고 renderToString메소드를 사용하여 인스턴스를 HTML 문자열로 렌더링합니다.

import {
    
     createSSRApp } from 'vue'
import App from './App.vue'

const app = createSSRApp(App)

const html = await renderToString(app)

withModifiers 메서드를 사용하여 Vue3의 이벤트에 수정자를 추가하는 방법은 무엇입니까?

답변: Vue3는 withModifiers이벤트에 수정자를 추가하는 메서드를 사용합니다. 수정자는 이벤트 이름 뒤에 .기호를 사용하여 지정할 수 있습니다 .

<template>
  <button @click.prevent="">Click</button>
</template>

import {
    
     withModifiers } from 'vue'

const handleClick = withModifiers(() => {
    
    
  console.log('clicked')
}, ['prevent'])

Vue3 인터뷰 질문: 답변 및 코드 예제가 포함된 연습 질문 20개

추천