¿Por qué debería aprender el marco Vue?
El marco Vue nació en 2014 y su autor es el chino You Yuxi. También es uno de los marcos más fáciles para empezar para los recién llegados. A diferencia de React y Angular, su documentación china también es conveniente para que todos la lean y aprendan. Vue es una biblioteca para crear interfaces web interactivas y un marco progresivo para crear interfaces web basadas en datos. El marco sigue la especificación CMD y el patrón de diseño proporcionado es el patrón MVVM (modelo->; view-gt; view-model) y un sistema de componentes componibles con una API simple y flexible. Este marco hereda la tecnología DOM virtual de React y la tecnología de enlace de datos bidireccional de Angular, y es un marco funcional relativamente nuevo.
Lo siguiente es lo que son el DOM virtual y el enlace de datos bidireccional:
1. El DOM virtual (DOM virtual), como sugiere el nombre, es un árbol DOM ficticio. Cuando manipulamos el DOM usando API nativas tradicionales o jQuery, el navegador realizará el proceso de principio a fin. Aunque el hardware de la computadora se actualiza e itera constantemente, ejecutar un DOM real sigue siendo muy costoso. Los nodos DOM reales, incluso los divs más simples, contienen muchos atributos, por lo que las operaciones frecuentes harán que la página se bloquee, lo que afectará la experiencia del usuario. Para resolver este problema de rendimiento del navegador, se diseñó Virtual DOM (Virtual DOM) y su algoritmo central es el algoritmo Diff. Guardará todo el contenido diferencial actualizado al DOM real en una sola operación en un objeto js local y, finalmente, adjuntará el objeto js al árbol DOM de una vez y notificará al navegador que realice el trabajo de dibujo, evitando así muchos cálculos innecesarios. .
La ventaja de utilizar objetos js para simular nodos DOM es que todas las actualizaciones de la página se pueden reflejar primero en los objetos js y, obviamente, operar objetos js en la memoria es mucho más rápido. Una vez completada la actualización, el objeto js final se asignará a un DOM real, que será dibujado por el navegador. (Rendimiento mejorado, velocidad de ejecución rápida)
2. Enlace de datos bidireccional Antes de hablar sobre el enlace de datos bidireccional, primero debemos hablar del enlace de datos unidireccional. vincula el modelo Definido a la vista, y cuando actualizamos el modelo con código JavaScript, la vista se actualizará automáticamente (Modelo-gt; vista). Entonces, el enlace de datos bidireccional significa que cuando el usuario actualiza la vista, los datos del modelo se actualizarán automáticamente (Modelo; vista), y cuando el usuario opera la entrada, el evento se monitoreará (v-on: entrada = ". ..") estará en la vista. Las actualizaciones se envían de vuelta al modelo (Ver-》Modelo) para implementar el enlace de datos bidireccional. En Vue, las operaciones anteriores son demasiado engorrosas, lo que proporciona el efecto de que v-model puede implementar directamente el enlace de datos bidireccional.
En el proceso de desarrollo de un proyecto vue, podemos introducir vue mediante la introducción de etiquetas de script o instalar Vue a través de npm, la herramienta de administración de paquetes que viene con nodejs. Y cree un nuevo objeto de instancia de Vue a través de new Vue(), que tiene muchos atributos, incluidos el, datos, métodos, calculado, reloj, etc. el se refiere al elemento de nodo que apunta a la página. Los datos almacenan datos. Los tipos de datos incluyen tipos de datos simples y tipos de datos complejos. Mostrado por la expresión de interpolación {{}}, cuando se muestra la interpolación, no es necesario escribir datos y el método se almacena en el método. El método se llama en forma de fn (), el método almacenado también es un método, pero son datos calculados, la lógica compleja debe almacenarse en computed y las propiedades calculadas se almacenan en caché en función de sus dependencias. Dado que Computed tiene una capa de caché, solo se volverá a ejecutar cuando cambien sus dependencias relevantes y el método solo se llama una vez. No es necesario agregar () al llamar a métodos en Computed.
watch también puede monitorear objetos utilizados para monitorear, monitorear y monitorear valores de propiedad en los datos, y tiene dos parámetros (currentValue y el valor antes de prevValue).