Vue, React y Angular son actualmente los tres marcos front-end más utilizados.Desde la perspectiva de las tendencias de GitHub, Vue ocupa el primer lugar y ha alcanzado las 170 000 estrellas.
En la actualidad, ya sea una gran fábrica de BAT o una empresa nueva, Vue tiene una amplia gama de aplicaciones.Para cualquier ingeniero front-end, Vue es un marco front-end que vale la pena aprender.
Sin embargo, después de que los pequeños programas domésticos cambiaron las reglas del juego en el desarrollo móvil, el nombre de Vue a menudo se asocia con programas pequeños. Exploremos la relación entre los dos juntos.
1. Primero, conoce Vue
Vue.js (pronunciado /vjuː/, similar a view) es un marco progresivo para crear interfaces de usuario. A diferencia de otros marcos pesados, Vue está diseñado para desarrollarse de forma incremental desde abajo hacia arriba. La biblioteca central de Vue solo se enfoca en la capa de vista y es muy fácil de aprender e integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue es perfectamente capaz de impulsar aplicaciones complejas de una sola página desarrolladas con componentes y bibliotecas de un solo archivo compatibles con el ecosistema de Vue.
El objetivo de Vue.js es habilitar el enlace de datos receptivo y los componentes de vista compuesta con la API más simple posible.
Lo anterior es la explicación dada por el sitio web oficial de Vue. Para la mayoría de los usuarios, todavía es muy abstracto y difícil de entender. Después de leerlo, es posible que aún no entiendas para qué se usa este marco. ¿Qué es un "marco progresivo"? ¿Qué es el "desarrollo incremental ascendente"? ¿Qué es una "capa de vista"? ¿Qué son los "componentes de archivo único"? ¿Qué es "aplicación compleja de una sola página?" ¿Qué es "enlace de datos receptivo y componentes de vista combinados" en el segundo párrafo?
1. ¿Qué es exactamente Vue.js?
Presumiblemente, todo el mundo usa una aplicación o página web para buscar noticias en Internet. Vue.js es una aplicación de página web que se utiliza para crear páginas web similares con muchos elementos de formulario y contenido que debe modificarse de acuerdo con las operaciones del usuario.
2. ¿Qué es una solicitud de una sola página?
Una aplicación de una sola página generalmente significa que una página es una aplicación y, por supuesto, también puede ser una subaplicación. Por ejemplo, una página puede considerarse una subaplicación. Por lo general, hay mucho procesamiento interactivo en aplicaciones de una sola página, y el contenido de la página debe cambiar dinámicamente según la operación del usuario.
3. ¿Qué es la capa de vista?
Ahora vamos a abstraer una aplicación de página web, entonces el DOM en HTML es en realidad una vista. Una página web forma la estructura de vista más básica a través de la combinación y el anidamiento de DOM, y luego a través de la modificación de CSS, en la estructura de vista básica " maquillaje "para que se vean más hermosas. Finalmente, cuando se trata de la parte de interacción, debe usar JavaScript para aceptar la solicitud de interacción del usuario y responder a la operación de interacción del usuario a través del mecanismo de eventos y modificar varios datos en la función de procesamiento de eventos, como modificar un determinado DOM La parte innerHTML o innerText. Dividimos el DOM en HTML en un nivel independiente de otras partes, y este nivel se llama capa de vista.
4. Enlace de datos receptivo
La capacidad de respuesta aquí no es el diseño receptivo en la consulta de medios @media, sino que significa que vue.js responderá automáticamente a los cambios en ciertos datos en la página. En cuanto a cómo responder, primero puede pegar el siguiente código en un archivo con una extensión de html, abrirlo con un navegador, ingresar algo de texto en el cuadro de texto y observar los cambios en la página.
5. Desarrollo de componentes
Para una aplicación de una sola página, la interacción y la estructura de la página son muy complicadas. Hay muchos módulos que deben escribirse en una página, y el código y la carga de trabajo de un módulo suelen ser muy grandes. Si todavía sigue el método original para desarrollar, entonces será agotador. Además, es muy problemático modificarlo en caso de cambios futuros en la demanda del producto. Me temo que después de mover uno de los divs, otros divs seguirán una avalancha, y toda la página se estropeará, o algunos eventos DOM internos ser modificado debido al mecanismo de burbujeo de eventos de JavaScript Después de procesar la función, aparecieron varios errores inexplicables y extraños.
En la programación orientada a objetos, podemos usar el pensamiento orientado a objetos para empaquetar varios módulos en clases o dividir un módulo comercial grande en más clases y más pequeñas. En la programación orientada a procesos, también podemos dividir algunas funciones grandes en muchas funciones y luego asignarlas a diferentes personas para su desarrollo.
En aplicaciones front-end, ¿podemos también empaquetar módulos como programación? Esto introduce la idea de desarrollo de componentes.
Vue.js divide varios módulos en una aplicación de una sola página en componentes individuales (componentes) a través de componentes Solo necesitamos escribir varias etiquetas de componentes en la aplicación principal (ocupación), y en Escribir los parámetros que se pasarán al componente en el etiqueta de componente (al igual que pasar parámetros a una función, este parámetro se denomina propiedad del componente), y luego escribir la implementación de cada componente (llenar el hueco), y luego se termina toda la aplicación.
2. La relación entre Vue y los applets
El primer punto que debe explicarse es que Vue no está directamente relacionado con el desarrollo de programas pequeños.
Sin embargo, bajo la influencia de Vue y los muchos desarrolladores de Vue, muchas organizaciones desarrollan programas pequeños por segunda vez y desarrollan programas pequeños en una forma similar a la sintaxis de Vue (finalmente los convierten en sintaxis nativa de programas pequeños a través de sus propias herramientas), como el mpVue de la Misión de los Estados Unidos (Vue.js en el programa mini). La ventaja es que reduce el costo para que los desarrolladores de Vue aprendan a desarrollar applets y optimiza las deficiencias de muchos applets.Por ejemplo, los applets no pueden usar Npm, preprocesadores CSS y sintaxis de devolución de llamada nativa.
Por ejemplo, mpVue es un marco front-end para desarrollar pequeños programas utilizando Vue.js. El marco se basa en el núcleo de Vue.js. Mpvue modifica la implementación del tiempo de ejecución y el compilador de Vue.js para que pueda ejecutarse en el entorno de programa pequeño, introduciendo así un conjunto completo de experiencia de desarrollo Vue.js. El uso de Mpvue para desarrollar applets obtendrá algunas capacidades adicionales basadas en el sistema de tecnología de applets:
Capacidad completa de desarrollo de componentes:
- Mejorar la reutilización del código
- Experiencia completa de desarrollo de Vue.js
- Práctica solución de gestión de datos de Vuex: fácil de crear aplicaciones complejas
- Mecanismo rápido de construcción de paquetes web: estrategia de construcción personalizada, hotReload durante la fase de desarrollo
- Admitir el uso de dependencias externas de npm Usar la herramienta de línea de comandos de Vue.js vue-cli
- Inicializar rápidamente el proyecto
- La capacidad de convertir y compilar código H5 en código objeto de applet
Si necesita obtener más información sobre el uso de mpVue para desarrollar programas pequeños, puede consultar el documento oficial: http://mpvue.com/mpvue/#_1
3. Cómo hacer que los Mini Programas sean más valiosos
Después de comprender cómo desarrollar programas pequeños basados en Vue, también puede aprender cómo aprovechar mejor el valor de los programas pequeños. Cabe mencionar que el modo híbrido se está volviendo popular gradualmente, y el modelo arquitectónico de programas pequeños nativos + se ha convertido en una tendencia Resuelve el problema de la aplicación tradicional que trae problemas como la iteración lenta, la acumulación de código, el mantenimiento multiplataforma, etc., y al mismo tiempo, tiene una experiencia muy superior a la de H5.
Lo que quiero recomendar aquí es FinClip, una tecnología de contenedor de programas pequeños relativamente madura en el mercado A través de la integración de SDK, su aplicación puede tener rápidamente la capacidad de ejecutar programas pequeños.
Además, la separación de la capa de vista y la capa lógica de FinClip también trae muchos beneficios:
1. Facilite el intercambio de datos y la interacción entre múltiples páginas de subprogramas. Tener el mismo contexto a lo largo del ciclo de vida de un subprograma proporciona una experiencia de codificación familiar para los desarrolladores con experiencia en desarrollo de aplicaciones nativas;
2. La separación y la implementación paralela de Service y View pueden evitar que la ejecución de JS afecte o ralentice la representación de la página, lo que ayuda a mejorar el rendimiento de la representación;
3. Debido a que JS se ejecuta en la capa de Servicio, el DOM operado en JS no afectará la capa de Vista, por lo que el subprograma no puede manipular la estructura DOM, lo que también hace que el rendimiento del subprograma sea mejor que el H5 tradicional.
Hay otro punto que vale la pena recomendar, que es compatible con la especificación de desarrollo del applet de WeChat .
En otras palabras, el subprograma WeChat desarrollado originalmente a través de Vue también se puede colocar en su propia aplicación sin cambiar el código. Al mismo tiempo, se proporciona una página de administración en segundo plano, que puede administrar miniprogramas propios y desarrollados externamente y analizar los datos recopilados del miniprograma.