Por qué vue.js no puede usar v-for en la etiqueta raíz de la plantilla del componente
En el mundo Angular, templateURL o ng-include permiten a los usuarios cargar dinámicamente archivos de plantillas remotas en tiempo de ejecución. Esto parece muy conveniente como función incorporada, pero volvamos a examinar esta función.
En primer lugar, nos permite escribir un archivo html separado como plantilla, para que podamos ver el resaltado de sintaxis correcto al editar, razón por la cual a muchos desarrolladores les gusta (Nota: creo que esto es porque la gente hoy en día se está volviendo perezosa y confía cada vez más en los IDE). ¿Pero es realmente una buena idea separar el código js y html? En los componentes de Vue.js, js y html están naturalmente estrechamente acoplados. De hecho, estos códigos son más simples y fáciles de entender en un solo archivo. Cambiar la lógica de contexto entre dos archivos en realidad hace que los desarrolladores se sientan más descontentos. En el concepto de vue, los componentes son las unidades de construcción básicas de vue.js, no archivos de plantilla. Cada plantilla de vue.js va acompañada de su buen amigo js. Separarlos sería demasiado cruel.
En segundo lugar, debido a que templateURL carga la plantilla a través de ajax en tiempo de ejecución, no es necesario crear un archivo separado. Esto es genial cuando estás desarrollando, pero cuando llega el momento de implementarlo en línea, estás en problemas. Antes de que HTTP 2.0 sea compatible a gran escala, la cantidad de solicitudes HTTP sigue siendo el factor más crítico en la carga de la página. Imagine que cada componente de su sitio web utiliza templateURL. Entonces es posible que necesite cargar docenas de solicitudes HTTP antes de que aparezca la página. Quizás no sepa que la mayoría de los navegadores limitan la cantidad de solicitudes simultáneas para el mismo nombre de dominio. Cuando superes este límite, el tiempo de representación inicial de tu página tendrá que esperar a la devolución de cada solicitud. Por supuesto, existen herramientas que pueden ayudarle a registrar todas sus plantillas con anticipación, pero esto agrega un paso más de construcción y, de hecho, esta es la tendencia inevitable para los sitios web grandes.
Entonces, ¿cómo abordamos el problema del entorno de desarrollo sin templateURL?
Unir cadenas en js es una mala idea, y usar script type="x/template"gt; este tipo de pseudoplantilla tampoco es bueno. Entonces, ahora es el momento de mejorar tus habilidades y utilizar un creador de módulos popular como Webpack o Browserify. Si no lo has usado antes, puede que te resulte un poco desalentador, pero créeme, será un salto cualitativo. Para sitios web y sistemas grandes, es necesaria una modularización adecuada. Además, puede escribir componentes de Vue en un archivo, además de resaltado de sintaxis, preprocesadores personalizados, recarga en caliente, ES6, CSS integrado y anteposición automática. Puede permitir a los desarrolladores aumentar la eficiencia 10 veces.
Finalmente, Vue también puede cargar sus componentes de manera diferida y es muy fácil de usar wabpack, aunque esto es para resolver un problema: el archivo de página creado es demasiado grande y la inicialización es lenta, por lo que mejor Es mejor separarlos.
¡Abandona las plantillas y abraza el mundo de los componentes! !
Lo anterior es una traducción del texto original, no una traducción completamente literal. Hay muchos idiomas propios, que probablemente tengan el mismo significado.
Personalmente, creo que la idea del componente de Vue es similar a React. Pone muchas cosas en js (aquí está el archivo .vue). CSS, html y js separados originales se combinan. Esto es muy similar a la práctica de muchos años, así que estoy de acuerdo con lo que dijo el tío Yu. Parece que la interfaz está girando en círculos y el modelo de desarrollo ha vuelto. lo que era antes, pero es una espiral, todo está escalando.
A juzgar por el uso reciente, este método de componente es muy conveniente y, naturalmente, lo ayuda a lograr el desacoplamiento y la separación. Por supuesto, debe cambiar su modo de pensar y no puede usar jquery para operar el DOM. Hay muchas diferencias con Angular. Vue no es un marco, sino más bien una biblioteca de clases, que es muy flexible. Por supuesto, algunas personas usarán una forma muy complicada de escribir código, lo que puede resultar muy complicado, por lo que es necesario. Para el equipo, puede acumular muy bien varios componentes y al mismo tiempo dividir las funciones, lo que facilita la cooperación. Depende de la comprensión de Vue por parte del equipo.