¿Qué frase se utiliza para representar el marco de Vue?
Debes haber visto el tutorial y hecho algunas demostraciones. Si te pidieran que resumieras "qué es Vue" en una oración, ¿cuál sería tu respuesta? . El tutorial oficial de Vue aquí también ofrece su propia explicación de una frase. Es la primera oración al comienzo del tutorial
Vue.js (pronunciado /vju?/, similar a view) es un marco progresivo para crear interfaces de usuario.
Esta frase puede que te resulte familiar, pero es posible que no la entiendas realmente. Notamos que hay una palabra resaltada por el autor en esta oración: marco progresivo. De hecho, después de comprender el significado de esta palabra, también entendemos esta oración y, por lo tanto, entendemos el concepto central de Vue.
Entonces, ¿qué significa exactamente un marco progresivo? Antes de explicar este término, primero debemos comprender la pregunta "¿Qué es un marco?" desarrollo final, Para completar una determinada tarea, primero usamos JS para obtener elementos DOM del archivo HTML, luego agregamos eventos y finalmente realizamos una serie de operaciones de programación JS. Llamemos a este método de desarrollo "flujo DOM". El método de desarrollo "flujo DOM" parece muy simple y práctico, pero a medida que las necesidades comerciales continúen cambiando, tendrá problemas y todo el código se volverá cada vez más complejo. cada vez más confuso e insostenible. Por ejemplo, supongamos que existe un requisito. Cuando se hace clic en una imagen, se puede registrar el número de clics. Esto parece muy simple. Según los métodos de desarrollo mencionados anteriormente, debe hacerse rápidamente. Luego, los requisitos cambiaron ligeramente. Se requiere que haya dos imágenes cuando se hace clic en ellas respectivamente, se puede registrar el número de clics. Esta vez parece muy sencillo, basta con copiar y pegar el código original. Entonces, ¿qué haces cuando esa solicitud se convierte en cinco imágenes? Simplemente copie y pegue, esto puede completar completamente este requisito, pero se sentirá muy incómodo porque su código se ha vuelto muy inflado en este momento y hay muchos procesos repetidos, pero parece estar dentro de su tolerancia. En este momento, los requisitos han cambiado ligeramente. Las cinco fotos todavía registran el número de clics respectivamente. Sin embargo, enumerar las cinco imágenes por separado parece ocupar demasiado espacio. Ahora solo es necesario que exista una imagen y se puede hacer clic. cambia seleccionando el botón . En este momento, es posible que falle, porque para completar este cambio aparentemente pequeño, es posible que sea necesario eliminar la mayor parte del código que escribió originalmente, o incluso borrarlo por completo, y comenzar desde cero, lo cual es aún más deprimente, sí, incluso si lo hace. Vuelva a escribir pacientemente el requisito; una vez que surjan nuevos requisitos, es posible que tenga que comenzar de nuevo. Esta es solo una tarea simple de registrar el número de clics. El método de desarrollo del "flujo DOM" parece haber causado grandes problemas en el desarrollo real, la lógica empresarial compleja y la gran cantidad de código hacen que el "flujo DOM" sea aún más difícil. Es simplemente insoportable.
Para solucionar los problemas anteriores, los desarrolladores reorganizaron la estructura organizativa del código y dividieron el código JS en tres secciones, datos (M), vista (V) y control lógico (*). La sección de datos solo contiene contenido de datos, la sección de vista solo es responsable de cambiar el estilo y el control lógico es responsable de conectar la sección de vista y la sección de datos y la lógica correspondiente, como se muestra en la figura siguiente. Los beneficios de esta organización de la estructura del código son obvios. Cuando los requisitos cambian, solo es necesario cambiar las secciones correspondientes. Tomemos como ejemplo el requisito de registrar la cantidad de clics en una imagen mencionada anteriormente. Esta es la demostración del código reorganizado. Puede ver que el código se ha vuelto más claro y más fácil de entender, y también puede imaginarse agregando ciertos requisitos usted mismo. Veamos cuántos cambios de código se requieren.
De hecho, este método de desarrollo es lo que a menudo llamamos el patrón MV*, y MVC, MVVM, MVP[2], etc. son todos derivados de MV*. cuál es el nombre del patrón Ahora que comprende el propósito de esta estructura de organización del código, comprenderá que estos patrones son esencialmente lo mismo, por lo que no existe una conexión directa entre los datos y la vista. De hecho, cuando se trata de esto, debe saber la razón por la cual el "flujo DOM" es defectuoso. En "flujo DOM", dom en realidad se considera Modelo. Obtenemos datos directamente de dom y luego cambiamos dom para actualizar la vista. La vista y el modelo en realidad están mezclados, y la organización del código es naturalmente caótica y difícil de mantener.
Y este método de organización del código MV* evolucionó gradualmente hasta convertirse en el llamado marco.
Una razón importante por la que los equipos eligen usar marcos en el desarrollo del equipo es porque la estructura organizativa del código establecida por el marco de antemano permite que el código del proyecto de desarrollo real tenga un lugar relativamente claro, por lo que no hay necesidad de preocuparse por alguien en el El equipo es negligente o tiene hábitos de codificación únicos. Causa confusión general en el código. Como digresión aquí, según la comprensión actual de los marcos, estrictamente hablando, Bootstrap no es un marco. De hecho, es solo un conjunto de herramientas CSS, que se utiliza principalmente para embellecer la interfaz. Jquery no implica la organización estructural del código. Simplemente simplifica algunas operaciones repetidas (como operaciones DOM, operaciones Ajax, etc.) y resuelve problemas de compatibilidad, por lo que es solo una biblioteca JS que se utiliza para facilitar las operaciones.
Ahora, utilizando el método de organización del código MV*, tenemos un código robusto que puede responder a los cambios en los requisitos. Durante el proceso de uso, los desarrolladores descubrieron gradualmente que cuando lidiamos con la necesidad de actualizaciones frecuentes de datos, siempre estamos haciendo el mismo trabajo: obtener el DOM y actualizar la vista de acuerdo con los nuevos datos. Estas tareas son tediosas y repetitivas, y esencialmente agotan la energía de los desarrolladores. Para resolver este problema, nació el marco MVVM basado en el patrón MV*: Knockout. Utiliza la forma de una instancia para pasar el contenido de la capa del modelo al llamado modelo de vista de la instancia y utiliza el método de enlace para completar el enlace bidireccional entre el modelo de vista y la vista. El modo cambia, la vista cambia y viceversa. Esta descripción de Knockout puede ser un poco abstracta; después de todo, no hay código, pero al menos sabe que el marco Knockout puede completar la actualización correspondiente de la vista después de que se actualizan los datos, como se muestra en la figura siguiente.
Quizás te preguntes por qué nunca has utilizado un framework con conceptos y funciones tan avanzados, o incluso has oído hablar de él antes. Esto se debe a que Knockout se adelantó a su tiempo cuando nació. ¿Aún recuerdas la razón por la que se mencionó el marco MVVM al principio de este párrafo? Para hacer frente a la necesidad de actualizaciones frecuentes de datos, y en ese momento la mayoría de las veces. Las páginas frontales solo involucran visualización estática e interacción simple, sin cambios frecuentes de datos, usar Jquery es suficiente. De esta manera, Knockout no se hizo popular en ese momento, pero el marco aún existe. Si está interesado, también puede consultarlo. Hasta los últimos años, con la creciente demanda de cambios frecuentes en los datos, la gente ha comenzado a prestar atención a este concepto de actualizar automáticamente nuevas vistas. Vue es uno de los muchos frameworks que hereda esta filosofía. Como se muestra en la figura siguiente, en una instancia de Vue con un sistema receptivo, el estado DOM es solo una asignación del estado de los datos, es decir, UI = VM (estado). Cuando cambia el estado en el lado derecho de la ecuación, la interfaz de usuario que se muestra en la página cambiará en consecuencia. Muchas personas encuentran que Vue es muy útil cuando comienzan, y esta es la razón. Sin embargo, cabe señalar que el posicionamiento central de Vue no es un marco [3] y el diseño no sigue completamente el patrón MVVM. Puede ver que solo hay dos partes, Estado y Vista, en la figura. La función principal de Vue enfatiza el estado de la interfaz. El mapeo no presta atención a la organización estructural del código, por lo que cuando solo usa sus funciones principales, no es un marco, sino más bien un motor de plantillas de vista. Los desarrolladores de Vue lo nombraron con una pronunciación similar a ver motivo.
Ahora veamos qué significa “progresista”. Como se mencionó anteriormente, la función principal de Vue es un motor de plantillas de vista, pero esto no significa que Vue no pueda convertirse en un marco. Como se muestra en la figura siguiente, contiene todos los componentes de Vue. Basado en la representación declarativa (motor de plantilla de vista), podemos construir un marco completo agregando sistemas de componentes, enrutamiento de clientes y administración de estado a gran escala. Más importante aún, estas funciones son independientes entre sí. Puede elegir otros componentes en función de las funciones principales sin necesariamente integrarlos todos. Se puede ver que el llamado "progresivo" es en realidad la forma de usar Vue, y también refleja el concepto de diseño de Vue.
En cuanto a la explicación de "progresivo", lo leí en Zhihu. Obtuve una buena respuesta, esta respuesta también le gustó al diseñador de Vue.
El ángulo de esta respuesta es muy bueno. Se explica principalmente a partir de la comparación con React y Angular. Como no he usado mucho los otros dos marcos, no haré comentarios al respecto, por lo que solo extraigo la respuesta como referencia [4]. .
En mi opinión, el significado de representación progresista es: la menor afirmación.
Cada marco inevitablemente tendrá algunas características propias, que tendrán ciertos requisitos para los usuarios. Estos requisitos son proposiciones. Su fuerza afectará el desarrollo empresarial.
Por ejemplo, Angular, se recomiendan encarecidamente ambas versiones. Si lo usa, debe aceptar las siguientes cosas:
-Debe usar su mecanismo de módulo-Debe usarlo. eso Inyección de dependencia: los componentes deben definirse usando su forma especial (esto está presente en todos los marcos de vista y es difícil de evitar)
Por lo tanto, Angular tiene una exclusividad relativamente fuerte si su aplicación no comienza desde cero. pero al considerar constantemente si integrarse con otras cosas, estas proposiciones causarán cierta confusión.
Por ejemplo, React también tiene un cierto grado de defensa. Su defensa es principalmente el concepto de programación funcional. Por ejemplo, es necesario saber qué son los efectos secundarios, qué son las funciones puras y cómo aislarlas. efectos secundarios. No parece tan intrusivo como Angular, principalmente porque es una intrusión suave.
Puede que Vue no sea tan bueno como React o Angular en algunos aspectos, pero es progresivo y no tiene pretensiones sólidas. Puede usarlo para implementar uno o dos componentes sobre el gran sistema original, y. úselo como jQuery; también puede usarlo para desarrollar todo el grupo familiar y usarlo como Angular también puede usar su vista para que coincida con toda la capa inferior de su propio diseño. Puede usar los conceptos de OO y patrones de diseño en la lógica de datos subyacente, o puede usar métodos funcionales. Es solo una vista liviana. Solo hace lo que debe hacer y no hace nada que no debería hacer. más.
Mi comprensión del significado de progresivo es: no hacer más de lo requerido.
Bien, ahora que hemos explicado el significado de "marco progresivo", volvamos atrás y veamos la oración inicial.
Vue.js (pronunciado /vju?/, similar a view) es un marco progresivo para crear interfaces de usuario.
¿Tienes una sensación diferente acerca de Vue? Ahora deberías saber cómo aprender y utilizar Vue. Al aprender, no necesitamos comprender todos los componentes y funciones de Vue desde el principio. Deberíamos comenzar a aprender desde las funciones principales y expandirlas gradualmente. Al mismo tiempo, durante el uso, no necesitamos sacar todos los componentes. Podemos usar lo que sea necesario y Vue también se puede combinar fácilmente con otros proyectos o marcos existentes.