前端框架之 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>
相关推荐
勇往直前plus3 小时前
Vue3(篇四)单页面应用到路由管理
javascript·typescript·前端框架·vue
LaughingZhu9 小时前
Product Hunt 每日热榜 | 2026-07-28
前端·神经网络·react.js·搜索引擎·前端框架
Highcharts.js16 小时前
教程:基于 React + Highcharts 构建一个单页应用程序、按需数据拉取与图表渲染
开发语言·前端·数据结构·react.js·前端框架·highcharts·页面应用
四眼肥鱼1 天前
【Nextjs】macos 系统运行报错:Error: Cannot find module '../lightningcss.darwin-x64.node'
前端·架构·前端框架
hoLzwEge1 天前
Unplugin Turbo Console:让你的 `console.log` 脱胎换骨
前端·前端框架
GISer_Jing1 天前
Langchain学习(II)中级RAG深度调优实战:切片策略、重排机制、混合检索全解
前端·ai·前端框架
GISer_Jing2 天前
前端转全栈须知后端知识
前端·后端·ai·前端框架
阿懂在掘金2 天前
Vue 弹窗新范式——代码减少、复用翻倍与 AI 时代的前端基建
前端·设计模式·前端框架
光影少年2 天前
RN原生交互 & 桥接
前端·javascript·react native·react.js·前端框架
码农学院3 天前
React公众号开发:母婴用品会员积分体系技术方案
前端·react.js·前端框架