1. Hable sobre la lista de representación de enlace de permisos dinámicos de vue (representación de lista de permisos)
-
Primero solicite al servidor que obtenga los datos de permiso del usuario actual, como solicitar this.$http.get("rights/list");
-
Después de obtener los datos de permiso, use la combinación de v-if v-if-else en la lista para mostrar contenido diferente
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>权限管理</el-breadcrumb-item>
<el-breadcrumb-item>权限列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图 -->
<el-card>
<el-table :data="rightsList" border stripe>
<el-table-column type="index" label="#"></el-table-column>
<el-table-column label="权限名称" prop="authName"></el-table-column>
<el-table-column label="路径" prop="path"></el-table-column>
<el-table-column label="权限等级" prop="level">
<template slot-scope="scope">
<el-tag v-if="scope.row.level === '0'">一级</el-tag>
<el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
<el-tag type="danger" v-else>三级</el-tag>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
// 权限列表
rightsList: []
};
},
created() {
this.getRightsList();
},
methods: {
async getRightsList() {
//获取权限列表数据
const { data: res } = await this.$http.get("rights/list");
if (res.meta.status !== 200) {
return this.$message.error("获取权限列表失败！");
}
this.rightsList = res.data;
}
}
};
</script>
<style lang='less' scoped>
</style>2. ¿Qué patrón de diseño usa Vue?
Pertenece al modo de publicación-suscripción. En vue, la combinación de los métodos Observer y DefineReactive se usa para secuestrar recursivamente los datos y luego suscribirse a los atributos a través de la clase de reloj. La clase Dep se usa para desacoplar. Cuando los datos cambian , los datos se activan primero. establezca el método y luego llame a Dep.notiify para notificar la actualización de la vista
3. Hable sobre el verdadero cuello de botella de rendimiento de dom de la operación vue
Varias situaciones de cuello de botella en el rendimiento de vue
-
Cuando se procesa una gran cantidad de datos a la vez, cuando hay una gran cantidad de datos y son de tipos complejos, hará que Vue secuestre los datos y los procese por más tiempo, y el tiempo de ejecución continuo de js es demasiado largo , lo que hará que la página no pueda interactuar durante mucho tiempo, y la representación El tiempo es demasiado lento y el usuario tarda demasiado en interactuar y dar su opinión una vez.
Esquema de optimización: puede usar
requestAnimationeste método para dividir los datos y renderizar en lotes, lo que reduce el tiempo de ejecución continuo de js y acelera el tiempo de renderizado. El tiempo de ejecución total se intercambia por el tiempo de renderizado. Los usuarios pueden recibir comentarios rápidamente y No podrá interactuar con la página debido a la ejecución prolongada de js. -
Cuando hay muchos datos en la página, solo una pequeña parte de la modificación hará que la página se congele, porque la actualización de vue se actualiza en la granularidad del componente. Siempre que los datos utilizados en el componente actual sean modificado, el componente se eliminará por completo. actualización, causando una gran pérdida de tiempo
Esquema de optimización: divida diferentes módulos en diferentes componentes, lo que puede reducir efectivamente el problema del tiempo de cálculo de diferencia demasiado largo de virtual dom. Por ejemplo, coloque una gran cantidad de módulos de datos en un solo componente y coloque otros componentes en un solo componente. vue se basa en componentes como la actualización de granularidad, la modificación de otros componentes no causará una nueva diferenciación de la tabla, lo que mejora la velocidad de respuesta de la página hasta cientos de veces
-
Ámbito de slot dinámico o actualización de slots estáticos
El uso del alcance de la ranura para reemplazar estas dos operaciones también puede mejorar el rendimiento, porque después del uso
插槽作用域, el contenido de la ranura se encapsulará en una función y el componente secundario lo representará en lugar del componente principal.
4. Cómo obtener dom, operar dom y actualizar dom en Vue
¿Cómo obtener dom? Vue proporciona una forma especial de obtener dom, es decir, agrega un atributo ref a dom, luego puede obtener el elemento dom a través de this.$refs.name.
¿Cómo operar dom y actualizar dom? Puede obtener el dominio real correspondiente a través de refs.name, y luego puede usar JS nativo para operarlo y actualizarlo. Por supuesto, el marco vue en sí mismo no requiere operaciones dom, y el dom se puede operar y actualizar fácilmente modificando los datos correspondientes y luego cooperando con las instrucciones y la sintaxis de la plantilla.
5. ¿Qué es el principio de enlace de datos bidireccional de Vue?
En Vue2.x, el enlace de datos bidireccional se realiza a través del secuestro de datos combinado con el modo de publicación-suscripción, es decir, los datos y la vista están sincronizados, y cuando los datos cambian, la vista cambia, y cuando la vista cambia, los datos también cambia. Núcleo: con respecto al enlace de datos bidireccional de VUE, su núcleo es el método Object.defineProperty().
Vue3.x se implementa con el objeto Proxy de sintaxis ES6.
Desventajas de Object.defineProperty():
-
Solo puede monitorear objetos (Object), no puede monitorear cambios en arreglos y no puede activar push, pop, shift, unshift, splice, sort, reverse.
-
Cada propiedad del objeto debe ser atravesada
-
Solo se pueden secuestrar las propiedades del objeto actual. Si desea secuestrar profundamente, debe atravesar profundamente los objetos anidados.
Ventajas del proxy:
-
Los proxies pueden escuchar directamente los objetos en lugar de las propiedades.
-
Proxy puede monitorear directamente los cambios de la matriz.
-
Proxy tiene hasta 13 métodos de interceptación, sin limitarse a apply, ownKeys, deleteProperty, has, etc. Object.defineProperty no lo tiene.
-
Proxy devuelve un nuevo objeto, solo podemos operar el nuevo objeto para lograr el propósito, y Object.defineProperty solo puede atravesar las propiedades del objeto y modificarlo directamente.
-
Como nuevo estándar, Proxy estará sujeto a la optimización continua del rendimiento en la que se centran los fabricantes de navegadores, que es la legendaria ventaja de rendimiento del nuevo estándar.
let arr = [];
let proxy = new Proxy(arr, {
get: function(obj, prop){
return obj[prop];
},
set: function(obj, prop, value){
obj[prop] = value; //可以被监听到变化
return true;
}
});
setTimeout(()=>{
proxy.push(1);
}, 2000)6. ¿Qué es el marco mvvm?
MVVM es la abreviatura de Model-View-ViewModel. Es esencialmente una versión mejorada de MVC (Model-View-Controller). Durante el proceso de desarrollo, debido al cambio o la adición de requisitos, la complejidad del proyecto es cada vez mayor y la cantidad de código es cada vez mayor. En este momento, encontraremos que MVC es un poco difícil de mantener, especialmente la capa de control del controlador es muy gruesa y enorme, difícil de mantener.
Así que alguien pensó en separar la parte de procesamiento de datos y lógica del Controlador y administrarla con un objeto especial, que es ViewModel. ViewModel es una capa de datos de vista generada y mantenida por una organización de desarrolladores front-end. En esta capa, los desarrolladores front-end convierten y procesan los datos del modelo obtenidos del back-end y realizan un empaquetado secundario para generar un modelo de datos de visualización que cumpla con las expectativas de la capa de visualización.
Debido a la realización del enlace bidireccional, el contenido de ViewModel se mostrará en la capa View en tiempo real, lo cual es emocionante, porque los desarrolladores front-end ya no tienen que actualizar la vista manipulando el DOM de manera ineficiente y problemática. El marco MVVM ya se ha vuelto más sucio y cansado. Una vez que se completan todas las partes, nuestros desarrolladores solo necesitan procesar y mantener ViewModel, y la vista de datos actualizada se actualizará automáticamente en consecuencia, logrando realmente un desarrollo basado en datos.
7. Hable sobre el almacenamiento de tokens de Vue
En el caso de la separación completa de los extremos delantero y trasero, la idea general de verificación de token en el proyecto Vue es la siguiente:
1. Al iniciar sesión por primera vez, el front-end ajusta la interfaz de inicio de sesión del back-end y envía el nombre de usuario y la contraseña
2. El backend recibe la solicitud, verifica el nombre de usuario y la contraseña y devuelve un token al frontend si la verificación es exitosa.
3. El front-end obtiene el token, lo almacena en localStorage y vuex, y salta a la página de enrutamiento
4. Cada vez que el front-end salta a la ruta, juzga si hay un token en localStroage, si no, saltará a la página de inicio de sesión, si es así, saltará a la página de enrutamiento correspondiente
5. Cada vez que ajuste la interfaz de back-end, debe agregar un token en el encabezado de la solicitud
6. El backend juzga si hay un token en el encabezado de la solicitud. Si hay un token, obtendrá el token y lo verificará. Si la verificación es exitosa, devolverá datos. Si la verificación falla (por ejemplo: token caducado), devolverá 401. Si no hay ningún token en el encabezado de la solicitud, devolverá 401.
7. Si el front-end obtiene un código de estado de 401, borre la información del token y salte a la página de inicio de sesión
8. ¿Conoce la función de nextTick, hable sobre su comprensión, qué es, cómo usarlo?
Cuando establece vm.message = 'mensaje nuevo', el componente no se volverá a procesar inmediatamente. Cuando se vacía la cola, el componente se actualiza en el siguiente "tick" del bucle de eventos. La mayoría de las veces no necesitamos preocuparnos por este proceso, pero si desea hacer algo basado en el estado actualizado del DOM, puede ser complicado. Si bien Vue.js generalmente alienta a los desarrolladores a usar una forma de pensar "basada en datos" y evitar tocar el DOM directamente, a veces tenemos que hacerlo. Para esperar a que Vue termine de actualizar el DOM después de que cambien los datos, puede usar Vue.nextTick(callback) inmediatamente después de que cambien los datos. De esta manera, se llamará a la función de devolución de llamada después de que se complete la actualización del DOM. Por ejemplo:
<div id="example">{
{message}}</div>
var vm = new Vue({
el: '#example',
data: {
message: 'old message'
}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent // 'old message'
Vue.nextTick(function () {
vm.$el.textContent // 'new message'
})9. La diferencia entre nextTick y setTimeout
En primer lugar, Vue se ejecuta de forma asíncrona al actualizar el DOM, es decir, cuando los datos cambian, el DOM no cambiará inmediatamente, entonces, ¿cómo sabemos cuándo cambiará el DOM? Es decir, ¿cómo saber el tiempo de disparo después de asíncrono?
Puede usar el método nextTick. Este método se encuentra en el código fuente. Primero controle si Promise.then está disponible y use la promesa para monitorear. Si el entorno actual no es compatible con la promesa, cambie a MutationObserver. Si MutationObserver no lo admite. , luego cambie a setImmediate. Si setImmediate no lo admite, use setTimeout(fn, 0).
Entonces, el resumen de la diferencia entre nextTick y setTimeout es: nextTick primero intentará usar tecnologías como promise, MutationObserver y setImmediate para monitorear, y si no lo admiten, se usará setTimeout
10. ¿Por qué usar dom virtual en lugar de operar dom real en vue?
Al principio, cuando usábamos JS/JQuery, era inevitable manipular mucho el DOM, y los cambios en el DOM desencadenarían el reflujo o el redibujado, lo que reduciría el rendimiento de la representación de la página. Entonces, ¿cómo reducir la operación de DOM? En este momento, nació la aplicación DOM virtual, por lo que el objetivo principal del DOM virtual es reducir los problemas de rendimiento causados por el reflujo y el redibujado causados por la operación frecuente del DOM.
Virtual DOM (Virtual Dom), es esencialmente un objeto JS al principio. Cuando los datos cambian, no operamos directamente el DOM real porque es muy costoso. Si operamos este objeto JS, no activará una gran cantidad de operaciones de reflujo y redibujado Junto con el algoritmo diff, puede encontrar las partes cambiadas entre dos DOM virtuales, de modo que pueda actualizar el DOM real a la vez con la cantidad mínima, en lugar de operar el DOM con frecuencia, y el rendimiento ha sido mejorado mucho
Otra ventaja del DOM virtual es que se puede renderizar en plataformas distintas al DOM para realizar funciones avanzadas como SSR y renderizado isomorfo.Esta función es utilizada por marcos como Weex.
11. ¿Cómo realiza Vue la transferencia de valor de los componentes?
Los padres pueden usar accesorios para pasar valores a los componentes secundarios.
Para pasar valores del componente secundario al principal, puede usar el método $emit del evento personalizado.
Valor de paso de componente multinivel, puede usar proporcionar/inyectar
Los componentes no relacionados pasan el valor, utilizando la administración de estado vuex
12. Habla sobre la comunicación entre padres e hijos en vue
Padre -> Hijo: Pase datos a componentes secundarios a través de Prop, y los componentes secundarios los reciben a través del atributo props.
<blog-post title="Mi viaje con Vue"></blog-post>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{
{ title }}</h3>' // Obtenga el valor del componente principal
})
Niño -> Padre: el componente principal personaliza el evento y el componente secundario usa $emit para completar.
<!--Obtener los datos $evento pasado por el subcomponente es 0.1--> <blog-post v-on:enlarge-text="postFontSize += $event"></blog-post>
Vue.component('blog-post', {
props: ['title'],
template: '<h3 v-on:click="$emit('enlarge-text', 0.1)">{
{ title }}< /h3>'
})
13. Hable sobre cómo realizar el método de comunicación y transmisión de valor de los componentes vue (las dos preguntas son la misma respuesta y el método de preguntar es diferente)
Este tipo de pregunta se clasifica primero para demostrar que sabe más al respecto. No la terminé o me la perdí. Al entrevistador no le importa mucho. Las cuatro
categorías principales de los componentes de la comunicación: padre e hijo, hijo y padre, hijo e hijo, intercambie niveles y
agregue los suyos propios de varias maneras Comprensión
1. props y $emit
Los componentes principales pasan datos a los componentes secundarios a través de accesorios, y los componentes secundarios pasan datos a los componentes principales a través de $emit para desencadenar eventos
2. $attrs y $listeners
3.
Los dos métodos por encima del bus central de eventos bus Se trata de la transferencia de datos entre los componentes padre e hijo, pero ¿qué pasa si los dos componentes no son padre-hijo? En este caso, se puede utilizar un enfoque de bus de eventos central. Cree un nuevo objeto de bus de eventos de Vue, luego active el evento a través de bus.$emit y escuche el evento activado a través de bus.$on.
4. Proporcionar e inyectar
Las variables se proporcionan a través del proveedor en el componente principal y luego las variables se inyectan a través de la inyección en el componente secundario. No importa qué tan profundo sea el subcomponente, siempre que se llame a inyectar, se pueden inyectar los datos en el proveedor. En lugar de estar limitado a solo obtener datos del atributo prop del componente principal actual, siempre que esté dentro del ciclo de vida del componente principal, el componente secundario puede llamarlo.
5.
Cuando el componente principal de v-model pasa el valor al componente secundario a través de v-model, pasará automáticamente un atributo prop de valor y modificará automáticamente el enlace de v-model a través de este. $ emit ('input', val ) en el componente hijo El valor de
6, $parent y $child
7, boradcast y dispatch
8. Vuex maneja la interacción de datos entre componentes. Si la lógica comercial es compleja y muchos componentes necesitan procesar algunos datos comunes al mismo tiempo, los métodos anteriores pueden no ser propicios para el mantenimiento del proyecto en este momento. El enfoque de vuex es usar estos datos públicos Los datos se extraen, y luego otros componentes pueden leer y escribir estos datos públicos, para lograr el propósito de desacoplamiento.
14. Hable sobre el papel del valor clave en vue
En cuanto a la función de esta posible clave, en primer lugar, muestra que la clave no es necesaria, puede ejecutarse sin escribir el código, pero se recomienda agregarla y luego señalar el lugar donde se puede usar . Hablando, siempre que la clave se use junto con v-for, la clave es la identificación única marcada para el nodo v en Vue. Con esta clave, nuestra operación diff puede ser más precisa y más rápida. En el proceso del algoritmo diff , los nodos antiguo y nuevo se identificarán primero. Comparación cruzada de cabeza a cola, cuando no hay coincidencia, la clave del nuevo nodo se comparará con el nodo anterior, y luego el algoritmo de diferencias se puede explicar claramente más allá del diferencia, y el proceso diff se puede resumir de la siguiente manera: oldCh y newCh tienen cada uno dos variables de cabeza y cola StartIdx y EndIdx, sus 2 variables se comparan entre sí y hay 4 métodos de comparación en total. Si ninguna de las cuatro comparaciones coincide, si la clave está configurada, la clave se usará para la comparación. Durante el proceso de comparación, la variable se inclinará hacia el medio. Una vez que StartIdx>EndIdx indica que al menos uno de oldCh y newCh ha sido atravesado, finalizará la comparación, estos cuatro métodos de comparación son cabeza, cola, vieja cola nueva cabeza, vieja cabeza nueva cola Preciso: si no se agrega ninguna clave, entonces vue elegirá reutilizar los nodos (la estrategia de actualización en el lugar de Vue), dando como resultado el estado del nodo anterior Si se retiene, se generará una serie de errores.Rápido: la estructura de datos del mapa puede utilizar completamente la unicidad de la clave.En comparación con la complejidad de tiempo O(n) de la búsqueda transversal , la complejidad de tiempo de Map es solo O (1) Después de terminar la conferencia, agregaré mi propia opinión. Se recomienda usar claves primarias como id
15. Hable sobre el algoritmo virtual dom y diff en vue
El DOM virtual es en realidad un árbol basado en objetos de JavaScript (nodos VNode), que utiliza las propiedades de los objetos para describir los nodos. De hecho, es solo una abstracción del DOM real. Finalmente, este árbol se puede mapear al DOM real mediante una serie de operaciones.
El siguiente es un ejemplo de mapeo del DOM real al DOM virtual:
<ul id='list'>
<li class='item'>Item 1 </li>
<li class='item'>Elemento 2</li>
<li class='item'>Elemento 3</li>
</ul>
var elemento = {
tagName: 'ul', // etiqueta de nodo name
props: { // Propiedades DOM, use un objeto para almacenar pares clave-valor
id: 'list'
},
children: [ // Nodos secundarios de este nodo
{tagName: 'li', props: {class: 'item' }, hijos: [ "Elemento 1"]},
{tagName: 'li', accesorios: {clase: 'elemento'}, hijos:
Como punto complementario, los beneficios del DOM virtual
tienen ventajas multiplataforma.Dado
que Virtual DOM se basa en objetos JavaScript y no depende del entorno de la plataforma real, tiene capacidades multiplataforma, como plataformas de navegador, Weex, Node, etc.
Operar el DOM nativo es lento y js se ejecuta de manera eficiente. Podemos poner la operación de comparación DOM en la capa JS para mejorar la eficiencia.
Debido a que la velocidad de ejecución de las operaciones DOM es mucho menor que la de Javascript, una gran cantidad de operaciones DOM se transfieren a Javascript, y el algoritmo de parcheo se usa para calcular los nodos que realmente necesitan actualizarse, y las operaciones DOM se minimizan, mejorando así significativamente el rendimiento.
Virtual DOM es esencialmente un caché entre JS y DOM. Se puede comparar con la CPU y el disco duro, dado que el disco duro es tan lento, agregamos un caché entre ellos; dado que DOM es tan lento, agregamos un caché entre su JS y DOM. La CPU (JS) solo opera en la memoria (DOM virtual) y escribe los cambios en el disco duro (DOM) al final para
mejorar el rendimiento de la representación
Actualice la vista de manera razonable y eficiente.
algoritmo diff
Debido a que vdom es un objeto JS puro, es muy eficiente operarlo, pero el cambio de vdom eventualmente se convertirá en una operación DOM Para lograr una operación DOM eficiente, es necesario un conjunto de algoritmos diff DOM virtuales eficientes. El algoritmo diff
incluye Estos son algunos pasos:
use la estructura de objeto de JavaScript para representar la estructura del árbol DOM; luego use este árbol para construir un árbol DOM real, insértelo en
el documento
Cuando cambia el estado, se reconstruye un nuevo árbol de objetos. Luego use el nuevo árbol para comparar (dif) con el árbol anterior y registre la diferencia entre los dos árboles.
Aplique la diferencia registrada en 2 al árbol DOM real creado en el paso 1 (parche), y la vista se actualizará. Se pasa el
algoritmo diff. Los nodos del árbol de la misma capa se comparan en lugar de buscar y atravesar el árbol capa por capa, por lo que la complejidad del tiempo es solo O (n), que es un algoritmo muy eficiente.
El proceso de implementación del DOM virtual
16. ¿Alguna vez has aprendido sobre vue3.0?, ¿Crees que vue3.0 es bueno?, ¿Qué tiene de bueno?
Este tipo de pregunta es abierta. Es correcto decir más. Puede hablar sobre diferencias o nuevos puntos de conocimiento.
Por ejemplo, las API de uso común son particularmente fáciles de usar.
-
ref、toRefs、toRef、isRef
-
ref se utiliza para definir variables de respuesta y acceso rápido al DOM.
-
Sintaxis básica:
const a = ref(1) // {value:1} -
Uso básico: generalmente se usa para definir tipos de datos basados en cadenas, números y booleanos, y .value accede de manera uniforme al rendimiento externo.
-
Suplemento: ref también puede acceder a objetos DOM u objetos de instancia de componente para operaciones DOM.
-
toRef y toRefs se utilizan para convertir una variable de objeto en una variable de respuesta.
-
Sintaxis básica:
const msg = toRef(obj, key)// Hacer que obj[clave] responda -
Sintaxis básica:
const { msg } = toRefs(obj)// Hacer que todo el obj responda -
unref devuelve el valor de una variable
-
Sintaxis básica:
const x = unref(x)// Si x es una variable de referencia, devuelve x.value, si x no es una variable de referencia, devuelve x directamente. -
isRef se usa para determinar si una variable es una variable sensible a ref
-
Sintaxis básica:
const bol = isRef(x)
function useUpdBoxStyle() {
const el = ref(null)
const updateStyle = color => {
el.value.style.color = color
}
return [el, updateStyle]
}
-
Ref. superficial, Ref. disparador
-
superficialRef se utiliza para la optimización del rendimiento, solo representando la primera capa del objeto
-
Sintaxis básica:
const obj = shallowRef({a:1,b:{c:{d:{e:2}}}}) -
triggerRef se usa para activar manualmente esas variables de referencia superficial para actualizar la vista
-
Sintaxis básica:
triggerRef(obj)// Cuando obj.value.bcd cambia, triggerRef(obj) fuerza la actualización de la vista. -
customRef referencia personalizada, divide la variable ref en obtener/establecer
-
Sintaxis básica:
customRef((track, trigger) =>({get,set})
function useObj() {
const obj = { a: 1, b: { c: { d: 2 }}}
const obj1 = ref(obj)
const obj2 = ref poco profunda(obj)
// console.log('obj1', obj1 )
// console.log('obj2', obj2)
const changeObj = (obj, newD) => {
// obj1.value.bcd = 100
obj.value.bcd = newD
triggerRef(obj)
}
return [[obj1, obj2], cambiarObj]
}
-
reactivo, solo lectura
-
reactivo se utiliza para definir variables reactivas (tipos de datos de referencia)
-
Sintaxis básica:
const arr = reactive([]) // {value: []} -
¿Cuál es la relación entre ref y reactivo? Detrás de la referencia se implementa utilizando reactivo.
-
Se utiliza el método superficial para la optimización del rendimiento, solo representando la primera capa del objeto.
-
Sintaxis básica:
const c = shallowReactive({a:{b:{c:100}}})// solo representa la primera capa de este objeto -
readonly Convierte las variables reactivas en "solo lectura" e informa una advertencia si se modifican.
-
Sintaxis básica:
const user = readonly({name:1,age:2}) -
isReadonly se usa para determinar si una variable es de solo lectura y devuelve un valor booleano
-
Sintaxis básica:
const bol = isReadonly(x) -
isProxy se usa para determinar si una variable responde y devuelve un valor booleano
-
Sintaxis básica:
const bol = isProxy(x) -
isReactive se usa para determinar si una variable es una variable reactiva y devuelve un valor booleano
-
Sintaxis básica:
const bol = isReactive(x)
function useUser() {
const user = readonly(reactive({name:'list',age:30}))
console.log('user', user)
// setTimeout(()=>user.age=40, 2000 )
const x = 1
const y = solo lectura({a:1,b:{c:3}})
console.log('是否被proxy拦截过', isProxy(usuario), isProxy(x), isProxy(yb) )
devolver usuario
}
-
toRaw, marcarRaw
-
toRaw se utiliza para devolver el valor bruto de una variable reactiva
-
Sintaxis básica:
const a3 = toRow(reactive(a1))// a1===a3 es verdadero -
markRaw se usa para marcar una variable ordinaria como "no proxyable"
-
Sintaxis básica:
const b2 = markRaw(b1)// b2 no puede ser reactivo
function useRaw() {
const a1 = { title: 100 }
const a2 = reactivo(a1)
const a3 = toRaw(a2)
consola.log('toRow(a2)===a1', a3===a1)
consola. log('a2===a1', a2===a1)
devuelve [a1,a2,a3]
}
-
calculado, reloj, relojEffect
-
computated se utiliza para volver a calcular la variable de respuesta, y se volverá a calcular cuando cambie la variable de respuesta de la que depende
-
Sintaxis básica:
const c = computed(()=>c1.value*c2.value)// solo lectura -
Sintaxis básica:
const c = computed({get:()=>c1.value*c2.value,set:(newVal)=>c1.value=newVal})// escribible y legible -
watch se usa para monitorear cambios en variables de respuesta, y el componente no lo inicializa
-
Sintaxis básica:
const stop = watch(x, (new,old)=>{})// Llamar a stop() para dejar de escuchar -
Sintaxis básica:
const stop = watch([x,y], ([newX,newY],[oldX,oldY])=>{}) -
watchEffect se usa para monitorear los cambios en las variables de respuesta, y se ejecutará la inicialización del componente
-
Sintaxis básica:
const stop = watchEffect(()=>ajax({cate,page,size}))
exportar la función predeterminada useWatchComputed() {
const c1 = ref(10)
const c2 = ref(20)
const c3 = computed(()=>c1.value*c2.value) // solo lectura
// legible y escribible
const c4 = calculado({
obtener: ()=>c1.valor*c2.valor,
establecer: (nuevoValor)=>{
c1.valor = parseInt(nuevoValor) / c2.valor
}
})
const detener1 = observar(c4, (nuevoC4, oldC4)=>console.log('c4 cambiado', newC4, oldC4))
const stop2 = watch([c1,c2], ([newC1,newC2],[oldC1,oldC2])=>{
console. log(' [c1,c2] nuevo valor:', [nuevoC1, nuevoC2])
console.log('[c1,c2] valor antiguo:', [oldC1, oldC2])
})
const stop3 = watchEffect(()= >{console .log('observar efecto', c1.valor, c2.valor)})
const update = (c,v) => c.valor = v
devolver [[c1,c2,c3,c4],[stop1,stop2,stop3,actualizar]]
}
2: También se puede decir que es un punto brillante
-
El rendimiento es 1,2 ~ 2 veces más rápido que vue2.x
-
Compatibilidad con compilación a pedido y agitación de árboles, más pequeña que vue2.x
-
Compatibilidad con API de composición
-
Mejor soporte para TS
-
grupo mas avanzado
3. Podría decirse que el rendimiento
1. El algoritmo diff es más rápido
Vue2.0 necesita comparar cada nodo globalmente. Si se encuentra que un nodo ha cambiado, lo actualizará.
Vue3.0 está creando un dom virtual, agregará una marca estática de acuerdo con si el contenido del DOM cambiará, ¡quién tiene la bandera! a quien comparar.
2. Mejora estática
Independientemente de si el elemento participa en la actualización en vue2, se recreará cada vez y luego se renderizará. Para los elementos que no participan en la actualización en vue3, se mejorará de forma estática, solo se creará una vez y se podrá reutilizar directamente durante el renderizado
3. Caché de escucha de eventos
De forma predeterminada, onclick está vinculado dinámicamente, por lo que sus cambios se rastrearán cada vez, pero debido a que es la misma función, no es necesario rastrear los cambios, solo almacenar en caché y reutilizar
La marca estática 8 se agregará antes, el evento de clic se considerará como un atributo dinámico y se comparará el algoritmo de diferencias, pero no habrá una marca estática después del caché del detector de eventos y el caché se reutilizará.
17. ¿Alguna vez has entendido v-model?¿Cuál es el principio?
No se limite a decir que no entiende este tipo de pregunta de principio.
Hablemos de usar
v-model es esencialmente un azúcar sintáctico, que puede considerarse como el azúcar sintáctico del método de valor + entrada. Se puede personalizar mediante el atributo prop y el evento de evento del modelo.
2. v-model es un comando de enlace bidireccional de vue, que puede actualizar el valor de la entrada de control en la página al atributo de datos del enlace relevante de forma síncrona, y también actualizar el valor del control de entrada en la página datacuando actualizando el atributo vinculante.
y luego los detalles
El enlace bidireccional de Vue se realiza mediante el secuestro de datos combinado con el modo de editor-suscriptor, entonces, ¿qué es el secuestro de datos? ¿Cómo realiza vue el secuestro de datos? Para decirlo sin rodeos, es secuestrar las operaciones setter y getter de las propiedades del objeto a través de Object.defineProperty(), y hacer lo que quiera cuando cambien los datos.
Ya sabemos que para lograr el enlace bidireccional de datos, primero debemos secuestrar y monitorear los datos, por lo que debemos configurar un observador de escucha para monitorear todos los atributos. Si el atributo cambia, debe informar al suscriptor Watcher para ver si necesita actualizarse. Debido a que hay muchos suscriptores, necesitamos un departamento de suscriptores de mensajes para recopilar específicamente estos suscriptores y luego realizar una administración unificada entre el observador oyente y el observador suscriptor. A continuación, también necesitamos un analizador de comandos Compile, que escanea y analiza cada elemento del nodo, inicializa los comandos relacionados (como v-model, v-on) en un suscriptor Watcher y reemplaza los datos de la plantilla o el enlace. La función correspondiente, cuando el suscriptor Watcher recibe el cambio del atributo correspondiente, ejecutará la función de actualización correspondiente para actualizar la vista. Entonces, a continuación, realizamos los siguientes tres pasos para realizar el enlace bidireccional de datos:
1. Implemente un observador de escucha, que se utiliza para secuestrar y monitorear todos los atributos, y notificar a los suscriptores si hay algún cambio.
2. Implemente un Observador de Suscriptor, cada Observador está vinculado a una función de actualización, el observador puede recibir la notificación de cambio de propiedad y ejecutar la función correspondiente para actualizar la vista.
3. Implemente una compilación del analizador, que puede escanear y analizar las instrucciones relevantes de cada nodo (v-model, v-on y otras instrucciones), si el nodo tiene v-model, v-on y otras instrucciones, la compilación del analizador se inicializa tales Los datos de la plantilla del nodo, para que se puedan mostrar en la vista, y luego inicializar el suscriptor correspondiente (Watcher)
3: finalmente, use Object.defineProperty en vue 2.0 y use el nuevo Proxy en vue 3.0 para monitorear cada propiedad y monitorear todo el objeto
18. ¿Cómo se comunica el componente VUE con iframe?
En realidad, las preguntas como esta no son particularmente detalladas. Es posible que el entrevistador no entienda el significado de la pregunta, pero debemos aprender a descifrar las preguntas del entrevistador.
Si no lo sabe, simplemente diga que la comunicación del componente de vue está hablando de páginas iframe para obtener v
El componente vue incrusta un iframe, y ahora quiero obtener la información en el componente principal en el iframe, usando la nueva característica PostMessage de H5 para resolver el problema entre dominios.
El uso de postMessage contiene dos API:
onMessage: seguimiento de mensajes
postMessage: mensaje enviado
codigo y ejemplos
<div class="mapbox">
<iframe name="map" src="http://localhost:8083/setposition.html?add='add'"></iframe>
</div>
clearMap(){
let map = document.getElementsByName("map")[0].contentWindow
map.postMessage("clearMap","*")
}
iframe内：
window.addEventListener('message', function (evt) {
if (evt.data == 'clearMap'){
clearMap()
}
//event.data获取传过来的数据
});19. ¿Ha utilizado alguna vez los comandos personalizados de VUE? ¿Cuáles son los métodos de los comandos personalizados?
Este tipo de pregunta es la misma, primero responda algunas instrucciones de uso frecuente, como v-for v-if v-model v-show, etc. Las instrucciones se dividen en globales y locales.
Luego, en respuesta a la directiva personalizada
Personalice las directivas a través de directivas. Las directivas personalizadas se dividen en directivas globales y directivas locales. Las directivas personalizadas también tienen varias funciones de enlace. Las más utilizadas son enlazar y actualizar. Cuando enlazar y actualizar desencadenan el mismo comportamiento, no les importan otros enlaces. Puede abreviarse. Una expresión puede utilizar varios filtros. Los filtros deben estar separados por un carácter de barra vertical "|". Su orden de ejecución es de izquierda a derecha.
20. Al modificar datos, ¿el componente de Vue se vuelve a renderizar de forma asíncrona o síncrona?
Esta pregunta es muy interesante, porque generalmente nuestra pregunta general asincrónica y sincrónica se refiere a problemas de solicitud de datos sincrónicos y asincrónicos.
Agregue componentes aquí y modifique datos Aquí hay un ejemplo para todos
<body>
<div id="app">
<div id="main">{
{num}}</div>
<button @click="add">更新</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
num:10
},
methods:{
add(){
this.num++;
console.log(this.num)//11
console.log(document.getElementById("main").innerHTML);//10
}
}
})
</script>esto puede explicar
Las actualizaciones de datos son síncronas, pero las actualizaciones de vistas son asíncronas
Para resolver este problema, debe usar $nextTick para resolver el problema de la actualización asíncrona de la vista
21. La función del modificador .sync es
En primer lugar, cuando veamos .sync, debemos saber que se trata de un decorador. Decoradores similares también tienen .stop .prevent y similares.
De hecho, este modificador es el azúcar gramatical que vue encapsula el subcomponente para modificar el valor dinámico pasado desde el componente principal, eliminando la necesidad de escribir el método del componente principal, pero agregando actualizaciones cuando el subcomponente emite
En algunos casos, es posible que necesitemos "enlazar en dos direcciones" un accesorio. Desafortunadamente, el verdadero enlace bidireccional plantea problemas de mantenimiento, ya que los componentes secundarios pueden modificar el componente principal y no hay una fuente obvia de cambios tanto en el componente principal como en el componente secundario.
explicación del código
// Aquí, el componente principal debe pasar un valor de título al componente secundario
<template>
<div>
<t-title :title.sync="fatherTitle"></t-title>
</div>
</template>
<script>
import tTitle from './blocks/list';
export default {
name: 'test1',
components: { tTitle },
data() {
return {
fatherTitle: '父组件给的标题'
};
},
}
</script>// Subensamblaje
<template>
<div>
<h3>{
{ title }}</h3>
<button @click="changeTitle">改变</button>
</div>
</template>
<script>
export default {
props:{
title: {type: String, default: '默认值11'}
},
methods: {
changeTitle() {
this.$emit("update:title", "子组件要改自己的标题");
}
}
};
</script>La clave aquí es que los parámetros en emit deben escribirse como 'actualizar' + ':' + 'accesorios para modificar'
This.$emit("método personalizado") se usó antes
22. Método de comunicación anidado de múltiples componentes de Vue
Este problema en realidad pertenece a la comunicación de componentes.La comunicación de componentes comunes incluye padre a hijo, hijo a padre, hijo a hijo y entre niveles.
Esta comunicación anidada de múltiples componentes es en realidad otra forma de preguntar a través de los niveles.
comunicación multicomponente
Método 1: pasar accesorios capa por capa
Método 2: Inyección de dependencia proporcionar instrucción inyectar recibir
Método 3: Usar bus público = new Vue() bus.$on para declarar bus.$emit() call
Método 4: Utilice la gestión de estado global de vuex
23. ¿Cómo vue hace que css tenga efecto solo en el componente actual?
El componente actual <style> se puede escribir como <style scoped> y se puede agregar scoped. Este estilo generalmente tiene lang lang puede ser menos scss stylus, etc. Sin scoped, es un estilo global
24. ¿Alguna vez has usado el keep-live de Vue? ¿Cual es el rol?
-
nunca usado
-
Usado, su función es guardar el estado del componente envuelto cuando se cambia el componente, para que no se destruya y evite múltiples renderizados.
25. Keepalive, ¿agregar esto tendrá un ciclo de vida más largo de lo habitual? Keepalive se ha almacenado en caché, pero cuando desee retroceder, agregue nuevos atributos en qué ciclo de vida implementar
Habrá dos funciones de enlace de ciclo de vida más que los componentes habituales, a saber: activado y desactivado. El componente envuelto keep-aliveno se destruirá al cambiar, sino que se almacenará en la memoria caché y ejecutará la función de enlace desactivada, y la función de enlace activada se ejecutará después de renderizar nuevamente. Si salta de nuevo al componente de visualización, puede hacerlo en activado
26. Hable sobre el ciclo de vida asociado de keep-alive
Habrá dos funciones de enlace de ciclo de vida más que los componentes habituales, a saber: activado y desactivado. El componente envuelto keep-aliveno se destruirá al cambiar, sino que se almacenará en la memoria caché y ejecutará la función de enlace desactivada, y la función de enlace activada se ejecutará después de renderizar nuevamente.
27. ¿Cuál es la instrucción para que Vue cree un proyecto?
-
El andamio cli oficial utilizado, si la versión es inferior a 3.0, utilice
npm init -
El uso de la versión cli superior a 3.0
vue create -
Puede usar vite para construir directamente el proyecto, el comando es
npm init vite@latest, siga las indicaciones, solo opere paso a paso
28. Cómo usar el enlace de referencia en vue
Al agregar un atributo ref a un componente o etiqueta, puede usar la API global $refspara obtener el elemento o componente dom en el código js, y los métodos o propiedades en él se pueden operar directamente.
29. Introducción de la protección de navegación vue y el interceptor de navegación jq
La protección de navegación de Vue generalmente se refiere a la protección de navegación de enrutamiento, que se utiliza para ejecutar una función de enlace cuando la página salta.
El protector de navegación más utilizado es el protector global router.beforeEach, que se utiliza principalmente para verificar el estado de inicio de sesión del usuario. Recibe tres parámetros a, desde, siguiente
-
to: el objeto de ruta que está a punto de entrar
-
from: la ruta a partir de la navegación actual
-
siguiente: una función de devolución de llamada, se debe llamar a este método; de lo contrario, la ruta no continuará hacia abajo
Nunca he oído hablar del interceptor de navegación jq. Generalmente, el papel de jQuery es operar en elementos dom. La función central de jQuery es el selector de elementos. Como se mencionó, ¿el navegador podría ser una clase de complemento jQuery de terceros? O la intercepción de solicitudes de red, si se trata de una intercepción de solicitudes de red, entonces si jQuery inicia una solicitud, puede encapsular un complemento de solicitud ajax global, que se puede realizar configurando ajaxSetup
// Consulte este https://www.runoob.com/jquery/ajax-ajaxsetup.html
$.ajaxSetup({
// url: 'demo_ajax_load.txt',
beforeSend() {
// Ejecutar antes de iniciar la solicitud
},
complete( ) {
// ejecutar después de que todas las solicitudes tengan éxito
},
});
30. ¿Qué comandos se usan comúnmente en vue?
-
La directiva v-model, para entrada de formulario.
-
Directiva v-on para el enlace de eventos.
-
La directiva v-bind se usa para vincular dinámicamente un valor y pasar variables.
-
El comando v-once, el evento solo se puede usar una vez, no importa cuántas veces se haga clic, no se volverá a ejecutar después de que se ejecute una vez.
-
El comando v-html reemplazará el contenido del intervalo con el valor de atributo de rawHtml y lo analizará directamente como código HTML.
-
El comando v-for se usa junto con las etiquetas HTML para el recorrido y la ubicación de los datos.
-
La instrucción v-if se usa para juicio condicional y opera directamente dom.
-
El comando v-else se usa para juzgar la condición y se usa junto con el comando v-if, lo que significa que se ejecutará cuando la condición no sea verdadera.
-
El comando v-show cambia el estado de visualización de los elementos según verdadero y falso.
31. Hay varios tipos de tragamonedas en vue, y el papel de las tragamonedas
Tres tipos: ranuras predeterminadas, ranuras con nombre y ranuras con alcance
-
ranura predeterminada
La ranura predeterminada se refiere a <ranura>, y la función de <ranura> es similar a un marcador de posición.
//Definir un subcomponente global Vue.component('child', { template: '<div><slot></slot></div>', }); var vm = new Vue({ el: '#root ' , });<!--componente secundario de referencia--> <div id="root"> <child> <span>Soy un marcador de posición</span> </child> </div>
La ranura definida en el subcomponente secundario anterior se reemplaza por la etiqueta de intervalo. Si no se define ninguna ranura en el subcomponente, la etiqueta de intervalo se ignorará directamente y solo se puede definir una única ranura en un subcomponente.
-
ranura con nombre
Puede especificar la ubicación de visualización configurando el atributo de nombre
Defina un componente <base-layout>:
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> <base-layout> <template v-slot:header> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template v-slot:footer> <p>Here's some contact info</p> </template> </base-layout> -
Ranuras con alcance
El componente principal reemplaza la etiqueta de la ranura, pero el contenido lo proporciona el componente secundario
<body> <div id="root"> <child> <!--定义一个插槽，该插槽必须放在template标签内--> <template slot-scope="props"> <li>{ {props.value}}</li> </template> </child> <!--!--定义不同的渲染方式--> <child> <!--slot-scope="props"作用是使props指向子组件中定义的<slot>--> <template slot-scope="props"> <h1>{ {props.value}}</h1> </template> </child> </div> </body> <script> //定义一个全局子组件 Vue.component('child', { data: function () { return { list: [1, 2, 3, 4], }; }, template: '<div><ul><slot v-for="value in list" :value=value></slot></ul></div>', }); var vm = new Vue({ el: '#root', }); </script>
32. Cómo usar complementos en vue
Instálalo directamente, impórtalo y úsalo. Vue o js, siempre que sea js, todos los complementos se usan de la misma manera, solo importe y vincule al nodo correspondiente u opere el nodo correspondiente.
33. Lazy loading de componentes Vue y lazy loading de imágenes
Carga diferida de componentes
-
Cuando se usa junto con complementos de enrutamiento, use el método de importación para lograr
// El primer paso es anotar el archivo importado por import
// import About from '../components/About.vue';
// El segundo paso es introducir componentes asincrónicamente en forma de funciones de flecha
const rutas = [
{
ruta: '/acerca de',
componente: () => import( /* webpackChunkName: 'acerca de' */ '../components/About.vue' )
}
]
````
2. Cómo usar la función de devolución de llamada al importar Importación de componentes, como
```js
// componente de carga diferida
const IconList = () => import('components/base/icon-list');
export default {
components: {
IconList,
},
};
````
Imagen de carga diferida
Es decir, al cargar la página, si hay demasiadas imágenes en la página, puede usar marcadores de posición para reemplazar las imágenes que no están en el área y solo cargar las imágenes que actualmente necesitan mostrarse. Supervise la posición de la barra de desplazamiento. Cuando la etiqueta de la imagen aparezca en el área visible, restablezca la ruta de la imagen a la ruta real y luego muestre la dirección de la imagen. En general, en el desarrollo real, el complemento de carga diferida de imágenes se usa directamente para realizarlo. Otra solución es usar el efecto de pantalla de esqueleto de página, que también es similar a la pantalla de marcador de posición.Cuando se cargan los datos, reemplace el contenido de la pantalla de marcador de posición.
34. ¿Has usado Vue para encapsular componentes?, ¿qué son?, dime cómo se implementan.
Por ejemplo, en la gestión en segundo plano, a menudo se reutilizan muchos módulos, como los componentes de navegación lateral, la encapsulación de gráficos de efecto comúnmente utilizados en proyectos (como gráficos de líneas, histogramas, etc.)
Los componentes del embalaje deben tener en cuenta la reutilización:
-
Ranura reservada ranura, llamadas múltiples Si la estructura de la vista del subcomponente es diferente, entonces es necesario reservar una ranura en la plantilla del subcomponente (ranura única, ranura con nombre, ranura de alcance)
-
Teniendo en cuenta la transferencia de datos, defina el componente de accesorios para recibir los datos pasados por el componente principal y preste atención al flujo de datos unidireccional, los accesorios no se pueden modificar directamente, $emit evento personalizado, modificación del componente principal
-
La lógica empresarial no debe procesarse en subcomponentes. Cuando se llama a los subcomponentes en diferentes componentes principales, los códigos de procesamiento empresarial son diferentes. Recuerde no procesar directamente el negocio en los subcomponentes. Los subcomponentes deben $emitir eventos personalizados y pasar datos a los componentes principales. El componente principal maneja el negocio.
35. Hablar sobre el funcionamiento de la gestión o comprensión de vuex
Vuex es un complemento de administración de estado para Vue, que adopta un método de administración centralizado para administrar el estado público de múltiples componentes en el proyecto.
Vuex tiene un concepto de almacén, que almacena el estado común de los componentes en el atributo de estado del almacén. El estado es de solo lectura, y los componentes solo se pueden usar y no se pueden modificar directamente. La modificación debe modificarse a través del Módulo de mutaciones en el almacén. La ventaja de esto es que cuando la modificación de datos es fácil de rastrear la fuente, y no modificará directamente los datos debido a múltiples componentes, lo que resulta en la influencia mutua de los datos entre los componentes. Al mismo tiempo, cuando hay datos de estado en nuestro almacén que necesitan solicitar una interfaz de datos para obtener, vuex diseñó un módulo de acción, en la acción Enviar una solicitud asíncrona en el módulo, y después de obtener los datos, envíe una mutación para modificar el estado. Cuando el estado cambia, el componente se actualiza automáticamente y el estado se puede modificar mediante la mutación de confirmación o la acción de envío en el componente.
El flujo de trabajo específico es el siguiente
36. Habla sobre el flujo de trabajo de Vuex
El almacén de vuex tiene 5 módulos, a saber, estado, mutaciones, acciones, getters, módulos
Definimos el estado público del componente en el estado del almacén vuex. El estado es de solo lectura y no se puede modificar directamente. Debe movilizar una mutación en el almacén para modificar el estado. Los captadores se pueden entender como propiedades calculadas en vuex Cuando estamos en un determinado Cuando se usa un estado en vuex en un componente, en lugar de usar el valor original directamente, se necesita derivar un nuevo valor, luego se pueden definir y obtener captadores en el componente. Cuando el estado dependiente cambia, los captadores volverán a calcular para obtener el nuevo valor. Al mismo tiempo, se puede enviar una solicitud asincrónica en la acción. Después de obtener los datos, confirme la mutación para asignar el estado.
El código específico es el siguiente:
código de almacén
const store = new Vuex.Store({
state: {
items: [] // 定义一个公共的购物车数据
},
getters: {
// 可以基于已有的state 派生新的状态
selectedItems (state) {
// 过滤购物车中未选中的商品
return state.items.filter(item => item.selected)
}
},
mutations: {
// 定义mutation来修改state
INIT_ITEMS(state, items){
state.items = items
}
},
actions: {
// action可以发送异步请求，得到数据后commit mutation将请求结果传入
FETCH_ITEMS({commit}, params = {}){
// 调用封装好的 接口函数
fetchItem(params).then(res => {
if(res.data.code === 200) {
commit('INIT_ITEMS', res.data.data)
}
})
}
}
})Usar vuex en componentes
// 获取state
this.$store.state.items // 直接获取
{
computed: {
...mapState(['items']) // 助手函数获取
}
}
// 获取getters
this.$store.getters.selectedItems // 直接获取
{
computed: {
...mapGetters(['selectedItems']) // 助手函数获取
}
}
// 组件中提交action
this.$store.dispatch('FETCH_ITEMS', {token: 'xxx'})
{
methods: {
...mapActions(['FETCH_ITEMS']) // 助手函数 直接调用this.FETCH_ITEMS(params)触发
}
}
// 组件中也可以直接commit mutation
this.$store.commit('INIT_ITEMS'[,参数])
{
methods:{
...mapMutations(['INIT_ITEMS']) // 助手函数 直接调用this.INIT_ITEMS(参数)
}
}37. ¿Cómo usarlo en el proyecto vuex? ¿Cuál es el principio de funcionamiento?
en principio:
En proyectos pequeños y medianos, si no hay muchos estados públicos de componentes, no se recomienda usar vuex, lo que aumentará la complejidad del código.Si desea comunicarse con los componentes, puede pasar directamente el bus de eventos En proyectos medianos y grandes, el estado público de múltiples componentes En la mayoría de los casos, se recomienda usar vuex
El flujo de trabajo específico de vuex es el siguiente:
Defina el estado público en el estado del almacén, envíe una solicitud asincrónica en la acción y llame a la mutación para asignarla al estado después de obtener los datos. El estado se usa en el componente. También puede enviar la acción y desencadenar la mutación en el componente para modificar el estado y actualizar la vista.
El código específico es el siguiente:
código de almacén
const store = new Vuex.Store({
state: {
items: [] // 定义一个公共的购物车数据
},
getters: {
// 可以基于已有的state 派生新的状态
selectedItems (state) {
// 过滤购物车中未选中的商品
return state.items.filter(item => item.selected)
}
},
mutations: {
// 定义mutation来修改state
INIT_ITEMS(state, items){
state.items = items
}
},
actions: {
// action可以发送异步请求，得到数据后commit mutation将请求结果传入
FETCH_ITEMS({commit}, params = {}){
// 调用封装好的 接口函数
fetchItem(params).then(res => {
if(res.data.code === 200) {
commit('INIT_ITEMS', res.data.data)
}
})
}
}
})Usar vuex en componentes
// 获取state
this.$store.state.items // 直接获取
{
computed: {
...mapState(['items']) // 助手函数获取
}
}
// 获取getters
this.$store.getters.selectedItems // 直接获取
{
computed: {
...mapGetters(['selectedItems']) // 助手函数获取
}
}
// 组件中提交action
this.$store.dispatch('FETCH_ITEMS', {token: 'xxx'})
{
methods: {
...mapActions(['FETCH_ITEMS']) // 助手函数 直接调用this.FETCH_ITEMS(params)触发
}
}
// 组件中也可以直接commit mutation
this.$store.commit('INIT_ITEMS'[,参数])
{
methods:{
...mapMutations(['INIT_ITEMS']) // 助手函数 直接调用this.INIT_ITEMS(参数)
}
}38. ¿Dónde necesita escribir en Vuex para manejar la asincronía?
El procesamiento asíncrono debe definirse en las acciones del almacén.
La acción es similar a la mutación, la diferencia es:
-
Las acciones envían mutaciones en lugar de cambiar directamente el estado.
-
La acción puede contener operaciones asíncronas arbitrarias.
Podemos enviar una solicitud asíncrona en la acción, desencadenar la mutación para pasar el resultado después del éxito y asignar el valor al estado en la mutación.
const store = new Vuex.Store({
state: {
items: [] // 定义一个公共的购物车数据
},
mutations: {
// 定义mutation来修改state
INIT_ITEMS(state, items){
state.items = items
}
},
actions: {
// action可以发送异步请求，得到数据后commit mutation将请求结果传入
FETCH_ITEMS({commit}, params = {}){
// 调用封装好的 接口函数
fetchItem(params).then(res => {
if(res.data.code === 200) {
commit('INIT_ITEMS', res.data.data)
}
})
}
}
})39. Hable sobre su comprensión de vuex
Vuex es una herramienta de gestión de estado especialmente diseñada para Vue, que se puede utilizar para la comunicación de componentes globales entre componentes padre-hijo y componentes que no son padre-hijo. El estado de la aplicación se coloca en el centro de la tienda. Para cambiar el estado, debe realizar la confirmación. Para cambiar el estado de forma sincrónica, debe enviar mutaciones. De forma asíncrona, primero debe pasar acciones y luego pasar mutaciones.
Hay un total de 5 módulos - estado de almacenamiento de estado - los captadores son como propiedades calculadas, el valor de retorno del captador se almacenará en caché de acuerdo con sus dependencias y solo se recalculará cuando cambien sus valores dependientes. Puede realizar algún procesamiento en los datos en el estado : la única forma de que las mutaciones cambien el estado en la tienda de Vuex es enviar una mutación, que se envía al módulo de mutaciones a través de store.commit : acciones acciones es un método para cambiar de forma asíncrona el estado en el estado, a través de store.dispatch Para enviar al módulo de mutaciones, y luego cambiar el estado en el estado enviando el compromiso - módulos Vuex nos permite dividir la tienda en módulos. Cada módulo tiene su propio estado, mutación, acción, getter e incluso submódulos anidados, divididos de la misma manera de arriba a abajo.
40.vuex: cómo cambiar los datos en el estado de un módulo y cómo obtenerlos de otros módulos
Debido al uso de un solo árbol de estado, todo el estado de la aplicación se concentrará en un objeto relativamente grande. Cuando la aplicación se vuelve muy compleja, el objeto de la tienda puede volverse bastante inflado.
Para solucionar los problemas anteriores, Vuex nos permite dividir la tienda en módulos . Cada módulo tiene su propio estado, mutación, acción, captador e incluso submódulos anidados, separados de la misma manera de arriba a abajo:
Después de modularizar vuex, es necesario cambiar el estado de otro módulo. Los captadores se pueden definir en este módulo. El código específico es el siguiente
// 模块a
const modulea = {
namespaced: true,
state: {
num: 10
},
mutations: {
ADD_NUM(state, n) {
state.num += n
}
}
}
// 模块b
const moduleb = {
namespaced: true,
state: {
num: 10
},
getters: {
// 在这里拿到 模块a numstate
moduleaNum (state, getters, rootState, rootGetters) {
// 模块下的getter有四个参数分别是当前模块的state，当前模块的getters，以及根state个根getters可以通过rootState获取其他模块的state
return rootState.modulea.num
}
},
mutations: {
ADD_NUM(state, n) {
state.num += n
}
}
}41. ¿Cuál es el estado de vuex y cómo cambiar el estado?
El estado de vuex se almacena en el atributo de estado del almacén. El estado es de solo lectura y no se puede modificar directamente. Debe llamar a la mutación para modificarlo.
const store = new Vuex.Store({
state: {
num: 10
},
mutations: {
ADD_NUM (state, n) {
state.num += n
}
}
})
// 在组件中直接出发mutaion
this.$store.commit('ADD_NUM', 10)
// 或者助手函数 提交 mutation
{
methods: {
...mapMutations(['ADD_NUM'])
}
}
// 直接调用即可
this.ADD_NUM(10)42. ¿Dónde usa vuex en el proyecto, el escenario de aplicación de vuex
en principio:
En proyectos pequeños y medianos, si no hay muchos estados públicos de componentes, no se recomienda usar vuex, lo que aumentará la complejidad del código.Si desea comunicarse con los componentes, puede pasar directamente el bus de eventos En proyectos medianos y grandes, el estado público de múltiples componentes En la mayoría de los casos, se recomienda usar vuex
En un proyecto, el estado público de múltiples componentes se puede almacenar en vuex, como los datos del carrito de compras de un sitio web de comercio electrónico, se pueden almacenar en vuex. Los datos de la barra lateral de diferentes roles en la autenticación de roles de administración en segundo plano y los datos de enrutamiento accesibles por diferentes roles se pueden almacenar en vuex y los datos se almacenan.