Una breve introducción a MVC y MVVM front-end
MVC
I. Resumen
El nombre completo de MVC es Model View Controller, que es la abreviatura de modelo (modelo)-vista (vista)-controlador (controlador) Es una especificación de diseño de software que organiza el código separando la lógica comercial, los datos y la visualización de la interfaz. Mejore y personalice las interfaces personalizadas y las interacciones de los usuarios sin reescribir la lógica empresarial.
- Vista (View): interfaz de usuario.
- Controlador (Controller): lógica de negocios
- Modelo (Modelo): almacenamiento de datos
2. Métodos de comunicación
-
Ver envía instrucciones al controlador
-
Después de que el controlador completa la lógica de negocios, requiere que el modelo cambie el estado
-
El modelo envía datos nuevos a Ver y el usuario recibe comentarios
La comunicación MVC es unidireccional:
浏览器发送请求
Contorller和Model交互获取数据
Contorller调用View
View渲染数据返回
MVVM
I. Resumen
MVVM (Model-View-ViewModel) es un patrón arquitectónico basado en el desarrollo front-end .
El núcleo es proporcionar un enlace de datos bidireccional entre View y ViewModel . No hay una conexión directa entre View y Model, sino interacción a través de ViewModel. Los cambios de View se reflejan automáticamente en ViewModel, y viceversa. Esto asegura que View y Model Data Consistency .
- M----> modelo representa la capa del modelo de datos, y la lógica empresarial de modificación y operación de datos también se puede definir en el Modelo;
- V-----> ver La capa de vista (interfaz) se usa para mostrar datos y es responsable de convertir el modelo de datos en una pantalla de interfaz de usuario.
- VM----> ViewModel (modelo de vista), es un objeto que sincroniza Vista y Modelo.
2. Métodos de comunicación
No hay una conexión directa entre View y Model, sino interacción a través de ViewModel.
ViewModel conecta la capa Vista y la capa Modelo a través del enlace de datos bidireccional, y la sincronización entre Vista y Modelo es completamente automática sin intervención humana, por lo que los desarrolladores solo deben prestar atención a la lógica comercial y no necesitan manipular manualmente .DOM
La diferencia entre MVC y MVVM
- La diferencia entre MVC y MVVM no es que VM reemplace por completo a C. El propósito de ViewModel es extraer la lógica comercial que se muestra en el controlador, no reemplazar el controlador. Todavía existe, y otras operaciones de vista deben implementarse en el controlador. Es decir, MVVM realiza la reutilización de componentes de lógica de negocio.
- MVVM usa datos para mostrar la capa de vista en lugar de operaciones de nodo, y VM lo realiza a través del enlace bidireccional de datos.
- MVVM resuelve el problema de que una gran cantidad de operaciones DOM en MVC conducen a un rendimiento de representación de página reducido, una velocidad de carga más lenta y afectan la experiencia del usuario.
- La ventaja de MVVM es que no necesita manipular el DOM usted mismo, los datos responden y, una vez que los datos cambian, la interfaz se actualiza automáticamente.