Vue MVVM 模型

文章归档于:https://www.yuque.com/u27599042/front-end


  • MVVM 是 Vue 实现数据驱动视图和双向数据绑定的核心原理。
  • 在 MVVM 模型中,主要由如下三部分组成:
    • M:Model,模型,也就是要渲染到视图 View 上的数据
    • V:View,视图,数据渲染的位置
    • VM:ViewModel,视图模型,可以视为 Model 和 View 之间建立关系的桥梁,VM 是 MVVM 的核心,VM 将要渲染到视图上的数据 Model 和数据渲染的位置 View 联系在了一起
  • MVVM 模型实现了视图 View 和数据 Model 之间的解耦
  • 以 Vue 为例说明 MVVM 的工作原理:
    • 在 Vue 中,Vue 实例对象扮演的角色就是 MVVM 中的 VM,Vue 实例对象将 Model 中的数据通过数据绑定的方式渲染到视图 View 中,当数据源 Model 发生变化时,Vue 实例对象会触发对视图 View 的更新;同时,Vue 实例对象也会监听视图中的变化,当视图中与 Model 相关的数据值发生了修改,Vue 实例对象能够监听到此次变化,从而触发数据源 Model 中数据的同步
相关推荐
用户86022504674725 分钟前
从入门到进阶的 React Native 实战指南
android·前端
贵州数擎科技有限公司6 分钟前
雨滴特效的 Three.js 实现
前端·three.js
问心无愧05136 分钟前
ctf show web入门98
android·前端·笔记
irving同学462387 分钟前
Drizzle ORM + PostgreSQL + Hono 学习笔记
前端·后端
明豆7 分钟前
HTTPS / TLS 1.3 深度解析 — Web 安全传输协议生产实战
前端·安全·https
Linsk7 分钟前
Rollup 官方插件 @rollup/plugin-inject 详解
前端·rollup.js·前端工程化
2601_958492558 分钟前
Performance Audit of Paper Boats Racing - HTML5 Racing Game
前端·html·html5
浮生望9 分钟前
《JavaScript语言精粹》第3章:对象——JS世界的基石
javascript
Aolith10 分钟前
从0到1实现帖子上传图片:我是如何复用头像上传逻辑的
vue.js·图片资源
irving同学4623810 分钟前
TypeScript 后端入门全景:Hono + Zod + Drizzle + PostgreSQL
前端·后端