English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Esta serie registra algunas experiencias y habilidades que he resumido en un año de desarrollo de vue.
mejorar el rendimiento utilizando Object.freeze()
Object.freeze() es ES5un nuevo atributo que permite congelar un objeto para evitar que se modifique.
vue 1.0.18+ofreciendo soporte para él, Vue no realiza la conversión de getter y setter para los objetos que se han congelado usando freeze en data o Vuex.
Si tienes un gran array o Object y estás seguro de que los datos no se modificarán, usar Object.freeze() puede mejorar significativamente el rendimiento. En mi desarrollo real, este aumento es aproximadamente5~10multiplicador, el multiplicador aumenta con la cantidad de datos.
Además, Object.freeze() congela los valores, pero puedes reemplazar la referencia de la variable. Por ejemplo:
<p v-for="item in list">{{ item.value }}</p>
new Vue({ data: { // vue no realiza el enlace de getter y setter para los objetos en list list: Object.freeze([ { value: 1 }, { value: 2 } ]) }, created () { // la interfaz no tendrá respuesta this.list[0].value = 100; // Las dos formas siguientes, la interfaz responderá this.list = [ { value: 100 }, { value: 200 } ]); this.list = Object.freeze([ { value: 100 }, { value: 200 } ]); } })
El documento de vue no menciona esta característica, pero es una práctica muy útil, para grandes datos de presentación, se puede usar Object.freeze para mejorar el rendimiento.
usar vm.$compile para compilar dom
$compile puede usarse para llamar manualmente a la forma en que vue compila dom. Cuando necesites manejar html generado por un plugin jQuery o html devuelto por el servidor, esta función puede ser útil. Pero ten en cuenta que es una api privada, que puede cambiar en cualquier momento, y este enfoque va en contra de la filosofía de vue. Úsalo solo cuando sea necesario.
new Vue({ data: { value: 'demo' }, created () { let dom = document.createElement('div'); dom.innerHTML = '{{ value }}'; this.$compile(dom); } })
usar track de manera razonable-by="$index"
track-porque es una técnica de optimización proporcionada por vue, que se puede reutilizar varias veces v-dom con el mismo id en el bucle for. Si tus datos no tienen un id único, también puedes elegir usar track-by="$index", pero debes prestar atención a algunos efectos secundarios.
Demos un ejemplo:
new Vue({ data: { list: [1, 2, 3] } }) <div id="demo-1"> <p v-for="item in list">{{ item }}</p> </div> <div id="demo-2"> <p v-for="item in list" track-by="$index">{{ item }}</p> </div>
en este momento, ejecutar this.list = [4, 5, 6], se puede acceder a través de F12se observa, el demo-1donde todos los dom se eliminan y luego se regeneran en el bucle de la lista, mientras que el demo-2no elimina el dom, sino que solo cambia los cuadros de texto de4,5,6. Esto es track-con el efecto de by="$index", se reutiliza dos veces v-dom con el mismo $index en el bucle for.
Esta es una buena técnica de optimización, pero no es aplicable en todas las situaciones, por ejemplo, cuando se incluyen controles de formulario o componentes secundarios en un bucle, ya que el dom no se elimina ni se regenera, lo que lleva a que el segundo ejecutar v-para, el valor del controlador de formulario existente no cambiará, puedes ver este ejemplo:https://jsfiddle.net/jysboza9/1/
No abuso de Directive
Hay una afirmación en línea, que cree que todas las operaciones DOM deben encapsularse en directivas. En el desarrollo real, creo que no debería seguir este dogma. La decisión de usar una directiva debe basarse en qué funcionalidad estás implementando, no en si realizas operaciones DOM. Por ejemplo, si quieres encapsular un plugin jQuery con vue, mira qué método de encapsulación es mejor:
<!-- component --> <datepicker></datepicker> <!-- directive --> <div v-datepicker="{options}"></div>
Creo que sin duda el primer método es mejor, datepicker es un componente independiente, no necesitas preocuparte por si realiza operaciones DOM internas o encapsula plugins jQuery.
Entonces, ¿cuándo se debe usar una directiva? Vamos a ver las directivas proporcionadas nativamente por el navegador:
<a title="[1#]">/a> <p title="[1#]">/p> <div title="[1#]">/div>
El atributo title proporciona la función tooltip para diferentes etiquetas, esto es una directiva. Una directiva debe representar una función independiente, que puede proporcionar la misma función para diferentes etiquetas y componentes.
Aun no se ha completado...
Este artículo ha sido organizado en el "Tutorial de Aprendizaje de Componentes Frontend de Vue.js", bienvenidos a leer y aprender.
Esto es todo el contenido de este artículo, espero que haya sido útil para su aprendizaje y que apoyen más al sitio web de clamor de tutoriales.
Declaración: El contenido de este artículo se ha obtenido de la red, pertenece a los respectivos propietarios de derechos de autor, se ha contribuido y subido por los usuarios de Internet de manera autónoma. Este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplaza # con @ para denunciar y proporciona evidencia relevante. Una vez verificada, este sitio eliminará de inmediato el contenido sospechoso de infracción de derechos de autor.)