Preguntas de la entrevista Vue3: 20 preguntas de práctica con respuestas y ejemplos de código

1. ¿Cuál es el principio de implementación de los datos receptivos en Vue3?

Respuesta: Los objetos proxy se utilizan en Vue3 para implementar datos receptivos. Cuando los datos cambien, Proxy activará automáticamente la actualización.

const state = {
    
    
  count: 0
}

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

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

1. ¿Qué es la API de composición en Vue3?

Respuesta: La API de composición es una nueva API en Vue3, que permite a los desarrolladores organizar y reutilizar la lógica de los componentes de manera más flexible.

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
    }
  }
}

1. ¿Cómo usar directivas personalizadas en Vue3?

Respuesta: Los métodos se utilizan en Vue3 app.directivepara definir directivas personalizadas. Las directivas personalizadas deben devolver un objeto que contenga funciones de enlace de directivas.

import {
    
     createApp } from 'vue'

const app = createApp({
    
    })

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

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

1. ¿Cómo usar el componente Teleport en Vue3?

Respuesta: Los componentes se utilizan en Vue3 <teleport>para implementar las funciones del Portal. El componente debe <teleport>colocarse en la ubicación de destino que debe transferirse y todeben especificarse las propiedades.

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

1. ¿Cómo usar los componentes de Suspenso en Vue3?

Respuesta: Los componentes se utilizan en Vue3 <suspense>para implementar marcadores de posición para la carga asíncrona de componentes. Requiere <suspense>que se use <template v-slot>el contenido de marcador de posición especificado en el componente.

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

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

1. ¿Cómo usar provide e inject en Vue3 para lograr una comunicación de componentes de nivel cruzado?

Respuesta: Vue3 utiliza providey injectutiliza métodos para lograr la comunicación entre componentes de nivel cruzado. Utilice métodos en componentes principales providepara proporcionar datos y métodos en componentes secundarios injectpara inyectar datos.

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
    }
  }
}

1. ¿Cómo usar el método watchEffect en Vue3?

Respuesta: Vue3 usa watchEffectmétodos para monitorear los cambios en los datos de respuesta y ejecutar funciones automáticamente cuando los datos cambian.

import {
    
     watchEffect } from 'vue'

const state = reactive({
    
    
  count: 0
})

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

1. ¿Cómo usar el método de reloj en Vue3?

Respuesta: Vue3 usa watchmétodos para monitorear los cambios en los datos de respuesta y ejecutar funciones de devolución de llamada cuando cambian los datos.

import {
    
     watch } from 'vue'

const state = reactive({
    
    
  count: 0
})

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

1. ¿Cómo usar el método calculado en Vue3?

Respuesta: Los métodos se utilizan en Vue3 computedpara crear propiedades calculadas. Las propiedades calculadas se pueden actualizar automáticamente en función de los cambios en los datos reactivos.

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

1. ¿Cómo usar el método ref en Vue3?

Respuesta: Vue3 usa refmétodos para crear una referencia a datos sensibles. Los valores referenciados se pueden .valueacceder y modificar a través de .

import {
    
     ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0

count.value++

console.log(count.value) // 1

1. ¿Cómo usar el método reactivo en Vue3?

Respuesta: Vue3 usa reactivemétodos para crear un objeto de datos receptivo. Las propiedades de los objetos se supervisan automáticamente en busca de cambios.

import {
    
     reactive } from 'vue'

const state = reactive({
    
    
  count: 0
})

console.log(state.count) // 0

state.count++

console.log(state.count) // 1

1. ¿Cómo usar el método toRefs en Vue3?

Respuesta: Vue3 utiliza toRefsmétodos para convertir las propiedades de un objeto de datos de respuesta en referencias de datos de respuesta.

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

1. ¿Cómo usar el método createApp para crear una instancia de Vue en Vue3?

Respuesta: Vue3 usa createAppmétodos para crear una instancia de Vue y usa mountmétodos para montar la instancia en el DOM.

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

const app = createApp(App)

app.mount('#app')

1. ¿Cómo usar el método defineComponent para definir un componente en Vue3?

Respuesta: Vue3 usa defineComponentmétodos para definir un componente y usa setupmétodos para escribir la lógica del componente.

import {
    
     defineComponent } from 'vue'

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

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

    return {
    
    
      message
    }
  }
})

1. ¿Cómo utilizar los métodos de proporcionar e inyectar para implementar la gestión de estado global en Vue3?

Respuesta: Vue3 utiliza providey utiliza injectmétodos para implementar la gestión de estado global. Puede usar métodos en el componente raíz providepara proporcionar el estado global y usar métodos en otros componentes injectpara inyectar el estado global.

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
    }
  }
}

1. ¿Cómo usar el método createRouter para crear una instancia de enrutamiento en Vue3?

Respuesta: Vue3 usa createRouterel método para crear una instancia de enrutamiento y usa useel método para instalar la instancia de enrutamiento en la instancia de 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)

1. ¿Cómo usar el método createStore para crear una instancia de Vuex en Vue3?

Respuesta: En Vue3, createStorese usa un método para crear una instancia de Vuex y provideel método se usa para inyectar la instancia en la instancia de Vue.

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
    }
  }
}

1. ¿Cómo usar el método defineAsyncComponent para crear un componente asíncrono en Vue3?

Respuesta: Vue3 usa defineAsyncComponentmétodos para crear un componente asincrónico y usa importdeclaraciones para cargar el archivo del componente.

import {
    
     defineAsyncComponent } from 'vue'

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

export default {
    
    
  components: {
    
    
    AsyncComponent
  }
}

1. ¿Cómo usar el método createSSRApp para crear una instancia de representación del lado del servidor en Vue3?

Respuesta: Vue3 utiliza createSSRAppmétodos para crear una instancia de representación del lado del servidor y utiliza renderToStringmétodos para representar la instancia como una cadena HTML.

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

const app = createSSRApp(App)

const html = await renderToString(app)

1. ¿Cómo usar el método withModifiers para agregar modificadores a eventos en Vue3?

Respuesta: Vue3 usa withModifiersmétodos para agregar modificadores a los eventos. .Los modificadores se pueden especificar usando símbolos después del nombre del evento .

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

import {
    
     withModifiers } from 'vue'

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