Algún resumen sobre la promoción de Vue.js
El primer truco: simplificar al observador de cosas complejas.
Restauración de escena:
Creado(){
this.fetchPostList()
},
Observar :{
searchInputValue(){
this.fetchPostList()
}
}
nosotros Obtener la lista una vez al crear el componente y escuche el cuadro de entrada. Es muy común volver a obtener la lista filtrada cada vez que algo cambia. ¿Hay alguna forma de optimizarlo?
Análisis móvil:
Primero, en los observadores, puede usar directamente el nombre literal de la función; segundo, declarar inmediato: verdadero significa que el componente se ejecutará inmediatamente cuando se ejecute; creado.
Observación: {
searchInputValue:{
Handler: ' fetchPostList ',
Instantáneo: correcto
}
}
El segundo truco: registrar de una vez por todas los componentes.
Restauración de escena:
Importar BaseButton desde "". /baseButton '
Importar BaseIcon desde "". /baseIcon
Importar BaseInput desde "". /baseInput '
Exportar valores predeterminados{
Componentes:{
Botón Básico,
BaseIcon,
Básico input
}
} & ltEntrada básica
v-model="searchText "
@keydown.enter="search "
/& gt;
& ltBaseButton @ clic = " buscar " & gt
& ltbase icono nombre = " buscar "/& gt;
p>
& lt/base button & gt;
Escribimos un montón de componentes básicos de la interfaz de usuario y luego, cada vez que necesitamos usarlos, primero tenemos que importarlos. y luego declarar los componentes. ¡Muy tedioso! Siguiendo el principio de ser vago si puedes, ¡debes encontrar formas de optimizar!
Análisis móvil:
Necesitamos utilizar el paquete web de artefactos para crear nuestro propio contexto (módulo) utilizando el método require.context() para lograr componentes de requisitos dinámicos automáticos. Este método toma tres parámetros: el directorio de la carpeta donde se buscará, si también se deben buscar sus subdirectorios y una expresión regular para los archivos coincidentes.
Agregamos un archivo llamado global.js en la carpeta de componentes y empaquetamos dinámicamente todos los componentes básicos necesarios en este archivo con la ayuda de webpack.
Importar Vue desde "vue"
función poner en mayúscula la primera letra (cadena){
Devuelve string.charAt(0). toupper case()+string . rebanada(1)
}
const requiere componente = requiere contexto(
'.', false, /\. vue$/
//Busque el archivo llamado vue en la carpeta del componente
)
requireComponent.keys().
forEach(fileName = & gt;{
configuración del componente constante = requiere componente (nombre de archivo)
nombre del componente constante = capitalizar la primera letra (
fileName.replace (/^\.\//, '').Replace (/\.\w+$/,'')
//Porque el formato del nombre de archivo obtenido es: './baseButton.vue ' , aquí hacemos un giro en U y agregamos la cola, manteniendo solo el nombre real del archivo
)
Vue.component (nombre del componente, configuración del componente. Valor predeterminado || componente. configuración)
})
Finalmente, importamos 'components/global js' en main.js, y luego puedes usar estos componentes básicos en cualquier momento y en cualquier lugar sin necesidad de introducirlos. ellos manualmente.
El tercer truco: clave del enrutador, este es el salario ascendente.
Restauración de escena:
La siguiente escena realmente rompe los corazones de muchos programadores... Primero, de forma predeterminada, todos usan Vue-router para implementar el control de enrutamiento.
Supongamos que estamos escribiendo un blog y el requisito es saltar de /post-page/a a /post-page/b, y luego nos sorprende descubrir que los datos no se actualizan después. el salto de pagina? ! La razón es que vue-router descubrió "inteligentemente" que se trataba del mismo componente y luego decidió reutilizar este componente, por lo que el método que escribió en la función creada nunca se ejecutó. La solución habitual es monitorear $route en busca de cambios para inicializar los datos, como este:
data() {
return {
load: false,
Error: nulo,
Publicación: nulo
}
},
Observación: {
$route': {
Handler: ' resetData ',
Inmediato: correcto
}
},
Método: {
resetData() {
this.loading = false
this.error = null
this.post = null
this.getPost(this.$route.params.id)
},
getPost(id){
}
}
El error está resuelto, pero ¿es demasiado elegante escribir así todo el tiempo? Siguiendo el principio de pereza, queremos que el código se escriba así:
data() {
Return {
Cargando: false,
Error: nulo,
Publicación:null
}
},
Creado(){
este .getPost(this.$route.params.id)
},
Método(){
getPost(postId) {
// ...
}
}
Análisis móvil:
Cómo se puede lograr este efecto ? La respuesta es agregar una clave única a la vista del enrutador para que incluso los componentes públicos se vuelvan a crear cada vez que cambie la URL. Aunque perdamos rendimiento perdido, evitamos infinitos errores. También tenga en cuenta que configuré directamente la clave para el recorrido completo de la ruta, matando dos pájaros de un tiro.
& ltrouter-view:key = " $ ruta . ruta completa " & gt; & lt/router-view & gt;
El cuarto truco: función de renderizado universal
p>
Restauración de escena:
Vue requiere que cada componente tenga solo un elemento raíz. Cuando tenga varios elementos raíz, vue le dará un error.
& lttemplate& gt
& ltli
v-for= "Ruta en ruta"
:key=" ruta.nombre "
& gt
& ltrouter-link:to = " ruta " & gt;
{{ route.title }}
</router-link>
</李>
</template>
Error: las plantillas de componentes solo deben contener un elemento raíz.
Si usa v-if en varios elementos, use v-else-if
para bloquearlos.
Análisis Móvil:
¿Hay alguna solución? La respuesta es sí, pero esta vez necesitamos usar la función render() para crear HTML en lugar de una plantilla. De hecho, la ventaja de usar js para generar html es que es extremadamente flexible y poderoso. No es necesario aprender a usar la API de comandos de vue, que tiene funciones limitadas, como v-for.
Si.(reactjs descarta las plantillas por completo).
Funcionalidad: Verdadero,
render(h, { props }) {
devolver accesorios rutas . /p>
{route.title}
& lt/router-link & gt;
& lt/李& gt
)
}
Quinto movimiento: Componentes avanzados para ganar sin mover.
Punto clave: este movimiento es extremadamente poderoso, así que asegúrate de dominarlo.
Cuando escribimos un componente, generalmente necesitamos pasar una serie de accesorios del componente principal al componente secundario, y el componente principal escucha una serie de eventos emitidos por el componente secundario. Por ejemplo:
//Componente principal
& ltEntrada básica
:value="valor "
Etiqueta="Contraseña"
Placeholder= "Por favor, introduzca la contraseña"
@input="handleInput "
@ focus = " handleFocus & gt
& lt/ entrada base & gt;
//Subcomponente
& lttemplate>
& ltlabel>
{{ label }}
& ltInvest
:value="valor "
:placeholder="placeholder "
@focus=$emit ('focus ', $ evento)"
@input="$emit('input ', $event.target.value)"
& gt
& lt/label & gt;
& lt/template & gt;
Existen los siguientes puntos de optimización:
1. Pasar del componente principal al componente secundario Cada propiedad de must. declararse explícitamente en las propiedades del componente secundario antes de que pueda usarse.
De esta manera, nuestros componentes secundarios deben declarar muchos accesorios cada vez.
Las propiedades nativas de DOM como placeholer en realidad se pueden pasar directamente de padre a hijo sin declaración. El método es el siguiente:
& ltInvest
:value="value "
v-bind="$attrs "
@ input="$emit('input ', $event.target.value)"
& gt
$attrs que contiene el alcance principal no fue reconocido (ni obtenido) como propiedad correcta vinculante (excepto clases y estilos). Cuando el componente no declara ningún
Props, esto incluirá todos los enlaces del ámbito principal, los componentes internos se pueden pasar a través de v-bind="$attrs " - muy útil al crear componentes de nivel superior. obras.
2. Tenga en cuenta que @focus=$emit('focus ', $event)" del componente secundario en realidad no hace nada. Simplemente envía el evento de regreso al componente principal, que en realidad es similar a lo anterior, no necesito declararlo explícitamente:
& ltInput
:value="value "
v-bind="$attrs. "
v-on="oyentes "
& gt
Valor calculado: {
oyentes() {
Devolver {
... $oyente,
Entrada: evento = & gt
$emit('entrada ', evento.target.value )
}
}
}
$listeners contiene detectores de eventos v-on en el ámbito principal (no. Decorador nativo. ). Se puede pasar a componentes internos a través de v-on="$listeners" - muy útil al crear componentes de nivel superior
3. nodo del componente BaseInput, por lo que el alcance principal no se reconocerá como accesorios de forma predeterminada.
El enlace de la función "recurrirá" y se utilizará como HTML normal.
Aplicado a. el elemento raíz del subcomponente. Por lo tanto, debemos configurar heredarAttrs:false. Estos comportamientos predeterminados se eliminarán para que los dos puntos de optimización anteriores puedan tener éxito.
Creo que lo ha dominado. Después de leer este método de caso, para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.
Lectura recomendada:
Tutorial de Vue para principiantes
. ¿Cómo empaquetar proyectos Vue según el entorno /p>?