前端框架之 MVVM

MVVM

vue 是典型的 MVVM 框架,v-model 实现了 VM 部分

MVVM 的理解

M:模型层、数据层,简单理解就是定义在 data 中的变量
V:视图层,就是浏览器展示的页面
M => V:数据的改变,需要同步更新页面。Vue2 中用到了 Object.defineProperty;Vue3 中用到了 Proxy
V=>M:页面输入,需要更新变量。这里用到了 v-model 来替我们完成变量的更新,这个就是 VM

这里指用户的输入:输入框、单选框、多选框、选择器、开关、时间日期选择等

vue如何变为 MVC

将 MVVM 变为 MVC 其实很简单,就是手动处理用户的输入,更新变量。

进一步:就是将 【v-model】 改为 【v-bind 和 v-on】

举例
复制代码
//  双向数据绑定 MVVM
<el-input v-model="input" placeholder="请输入内容"></el-input>

// 手动处理 数据更新  MVC
<el-input :value="input"  @input="input = $event.target.value" placeholder="请输入内容"></el-input>
相关推荐
freewlt12 小时前
React Server Components 深度解析
前端·react.js·前端框架
光影少年14 小时前
前端线上屏幕出现卡顿如何排查?
开发语言·前端·javascript·学习·前端框架·node.js
军军君0120 小时前
数字孪生监控大屏实战模板:固体颗粒物监管平台
前端·javascript·vue.js·typescript·前端框架·echarts·less
我滴老baby1 天前
ReAct推理模式详解让智能体学会边思考边行动
前端·react.js·前端框架
@大迁世界1 天前
33.如何在 React 中使用内联样式(inline styles)?
前端·javascript·react.js·前端框架·ecmascript
Ting.~1 天前
从 0 到 1 搭建 Vue 项目
vue.js·前端框架
程序员cxuan2 天前
我开发了一个排版工具
程序员·前端框架
❆VE❆2 天前
React基础篇(三):项目中 React 基础核心知识点实战
前端·javascript·react.js·前端框架
鹏程十八少2 天前
7. 2026金三银四 Java 虚拟机面试终极版:32 道必考题 + 图解 + 源码精讲
后端·面试·前端框架