Aquí hay 20 preguntas sobre Vue, con respuestas y ejemplos de código.
1. ¿Qué es Vue?
Vue es un marco progresivo para construir interfaces de usuario. Vue adopta un diseño de aplicación capa por capa de abajo hacia arriba. La biblioteca central de Vue solo se enfoca en la capa de visualización, que es muy fácil de aprender, liviana y fácil de integrar con otras bibliotecas o proyectos existentes.
2. ¿Cuáles son los dos conceptos centrales de Vue?
Dos conceptos básicos de Vue son los basados en datos y en componentes .
3. ¿Cuáles son las ventajas de Vue?
Las ventajas de Vue incluyen:
- Fácil de aprender y usar
- Marco progresivo que introduce gradualmente más funciones según sea necesario
- Representación más rápida y tamaños de archivo más pequeños
- Proporciona algunas herramientas y complementos convenientes, como Vue Devtools y Vue CLI, etc.
- Se puede integrar fácilmente con otras bibliotecas y proyectos existentes
4. ¿Qué funciones de enlace de ciclo de vida tiene Vue?
Vue tiene 8 funciones de enlace de ciclo de vida, a saber:
- antes de crear
- creado
- antes del monte
- montado
- antes de Actualizar
- actualizado
- antes de destruir
- destruido
5. ¿Cuál es la sintaxis de la plantilla de Vue?
La sintaxis de la plantilla de Vue es una sintaxis basada en HTML que se utiliza para describir cómo representar los datos de la plantilla en la página. La sintaxis de la plantilla de Vue incluye expresiones de interpolación, directivas, enlaces de eventos y más.
6. Describa las expresiones de interpolación de Vue.
Las expresiones de interpolación de Vue están representadas por llaves dobles, como { {mensaje}}. Una expresión de interpolación inserta el valor de la expresión en el contenido de texto del elemento contenedor.
7. ¿Qué es el comando de Vue?
Las directivas de Vue son atributos HTML especiales que comienzan con v- que se utilizan para agregar un comportamiento receptivo en las plantillas. Las instrucciones de Vue incluyen v-if, v-for, v-bind, v-on, etc.
8. ¿Qué es una propiedad calculada en Vue?
La propiedad computada de Vue es una propiedad en caché que se calcula en función de otras propiedades. Las propiedades calculadas solo se vuelven a calcular cuando cambian las propiedades de las que dependen.
// 计算属性的示例
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
9. ¿Qué son los métodos Vue?
Un método Vue es una función que maneja eventos, propiedades calculadas, etc. Los métodos de Vue se pueden llamar a través de directivas en plantillas.
// 方法的示例
methods: {
greet: function (event) {
// 事件处理逻辑
}
}
10. ¿Qué es un filtro en Vue?
Los filtros de Vue son funciones que manejan el formato de texto en plantillas. Los filtros de Vue se pueden usar para formatear fechas, cantidades, etc.
// 过滤器的示例
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
11. ¿Cómo comunicarse entre los componentes padre e hijo de Vue?
Los componentes padre-hijo de Vue pueden comunicarse a través de accesorios y emitir. Los componentes principales pasan datos a los componentes secundarios a través de props, y los componentes secundarios se comunican a través de emit. El componente principal pasa datos al componente secundario a través de props, y el componente secundario pasae mi t para la comunicación. El componente principal pasa datos al componente secundario a través de props , y el componente secundario pasa datos al componente principal a través del evento de activación de emisión .
// 父组件向子组件传递数据的示例
<template>
<child-component :message="parentMessage"></child-component>
</template>
<script>
export default {
data () {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>
// 子组件接收父组件传递数据的示例
<template>
<div>{
{
message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
12. ¿Cómo se comunican los componentes de Vue entre sí?
Los componentes de Vue pueden comunicarse a través del bus de eventos, Vuex, proporcionar/inyectar, etc. Entre ellos, event bus y Vuex son métodos comúnmente utilizados.
// 通过事件总线进行组件通信的示例
// EventBus.js
import Vue from 'vue'
export default new Vue()
// ComponentA.vue
import EventBus from './EventBus.js'
export default {
methods: {
handleClick () {
EventBus.$emit('event', data)
}
}
}
// ComponentB.vue
import EventBus from './EventBus.js'
export default {
created () {
EventBus.$on('event', data => {
// 处理事件
})
}
}
// 通过Vuex进行组件通信的示例
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: 'Hello from store'
},
mutations: {
updateMessage (state, payload) {
state.message = payload.message
}
}
})
// ComponentA.vue
export default {
methods: {
handleClick () {
this.$store.commit('updateMessage', {
message: 'Hello from ComponentA' })
}
}
}
// ComponentB.vue
export default {
computed: {
message () {
return this.$store.state.message
}
}
}
13. ¿Qué es el enrutamiento en Vue?
Routing for Vue es un complemento para administrar las transiciones entre páginas. El enrutamiento de Vue puede hacer que las aplicaciones de una sola página sean más amigables y manejables.
// 路由的示例
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/', component: Home },
{
path: '/about', component: About }
]
export default new VueRouter({
routes
})
14. ¿Qué es el componente de archivo único de Vue?
El componente de archivo único de Vue es un componente que encapsula plantillas, estilos y lógica en un solo archivo. Los componentes de un solo archivo de Vue pueden hacer que los componentes sean más claros y fáciles de mantener.
// 单文件组件的示例
<template>
<div class="message">
{
{
message }}
</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello from component'
}
}
}
</script>
<style>
.message {
font-size: 24px;
color: #333;
}
</style>
15. ¿Qué son los mixins de Vue?
Los mixins de Vue son una forma de reutilizar el código de los componentes. Los mixins de Vue pueden extraer el mismo código en componentes, lo que hace que el desarrollo de componentes sea más eficiente.
// mixins的示例
// mixin.js
export default {
data () {
return {
message: 'Hello from mixin'
}
},
methods: {
greet () {
console.log('Hello from mixin')
}
}
}
// Component.vue
import Mixin from './mixin.js'
export default {
mixins: [Mixin],
created () {
console.log(this.message) // 'Hello from mixin'
this.greet() // 'Hello from mixin'
}
}
16. ¿Cuáles son los componentes asíncronos de Vue?
El componente asíncrono de Vue es un componente que se puede cargar a pedido. Los componentes asíncronos de Vue pueden mejorar el rendimiento de la aplicación y reducir el tiempo de carga inicial.
// 异步组件的示例
Vue.component('async-component', function (resolve, reject) {
setTimeout(() => {
resolve({
template: '<div>Hello from async component</div>'
})
}, 1000)
})
17. ¿Cuál es el método nextTick de Vue?
El método nextTick de Vue es una forma de ejecutar una función de devolución de llamada después de que se haya actualizado el DOM. El método nextTick de Vue se puede usar para manejar operaciones relacionadas con DOM.
// nextTick方法的示例
methods: {
handleClick () {
this.message = 'Hello'
this.$nextTick(() => {
// DOM更新后的回调
})
}
}
18. ¿Cuál es la función de gancho de comando de Vue?
La función de enlace de instrucciones de Vue es una función de enlace que maneja el ciclo de vida de las instrucciones. Las funciones de gancho de comando de Vue incluyen enlazar, insertar, actualizar, actualizar componentes y desvincular.
// 指令钩子函数的示例
Vue.directive('my-directive', {
bind: function (el, binding) {
// 指令绑定时的逻辑
},
inserted: function (el, binding) {
// 指令插入到DOM时的逻辑
},
update: function (el, binding) {
// 指令所在组件更新时的逻辑
},
componentUpdated: function (el, binding) {
// 指令所在组件及其子组件更新时的逻辑
},
unbind: function (el, binding) {
// 指令解绑时的逻辑
}
})
19. ¿Cuáles son los efectos de transición en Vue?
Las transiciones de Vue son una forma de animar elementos cuando se insertan, actualizan o eliminan. Los efectos de transición de Vue pueden hacer que la página sea más animada e interesante.
// 过渡效果的示例
<template>
<transition name="fade">
<div v-if="show">{
{
message }}</div>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
</style>
20. ¿Cuál es el principio de respuesta de Vue?
El principio de respuesta de Vue es una forma de vincular datos a vistas. El principio receptivo de Vue implementa el secuestro de datos a través del método Object.defineProperty. Cuando los datos cambian, la vista se actualizará automáticamente.