前端框架之 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>
相关推荐
Light6014 小时前
Signal 与现代前端框架的响应式机制
性能优化·前端框架·边缘计算·signal·细粒度响应·ai驱动界面
HexCIer1 天前
Arco Design 停摆!字节跳动 UI 库凉了?
react.js·前端框架
风止何安啊1 天前
React 入门秘籍:像搭积木一样写网页,JSX 让开发爽到飞起!
前端·react.js·前端框架
yuegu7771 天前
DevUI Modal 模态弹窗组件使用详解
ui·前端框架
GIS好难学1 天前
0帧起手《Vue零基础教程》,从前端框架到GIS开发系列课程
前端·vue.js·前端框架
LYFlied1 天前
Vue Vapor模式与AI时代前端发展的思考:虚拟DOM与框架的未来
前端·vue.js·人工智能·前端框架
Tiam-20161 天前
安装NVM管理多版本node
vue.js·前端框架·node.js·html·es6·angular.js
蜗牛攻城狮2 天前
Vite 环境变量配置详解及最佳实践
前端框架·vite·构建工具
亚洲小炫风2 天前
React 分页轻量化封装
前端·react.js·前端框架
Youyzq2 天前
react-inlinesvg如何动态的修改颜色SVG
前端·react.js·前端框架