前端框架之 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>
相关推荐
梦6502 小时前
React 简介
前端·react.js·前端框架
光影少年2 小时前
useMemo 和 React.memo区别
前端·react.js·前端框架
e***U8204 小时前
前端路由懒加载实现,React.lazy与Suspense
前端·react.js·前端框架
学习吖8 小时前
vue中封装的函数常用方法(持续更新)
大数据·javascript·vue.js·ajax·前端框架
音符犹如代码13 小时前
《后端开发者快速上手:Vue3 + Element Plus 前端开发概念映射与实战技巧》
前端·javascript·vue.js·前端框架
前端超人14 小时前
[译]发布 Angular v21
前端·前端框架·angular.js
敲敲了个代码14 小时前
React组件命名为什么用小写开头会无法运行?
前端·javascript·react.js·面试·职场和发展·前端框架
囨誌17 小时前
Vben admin
前端·前端框架·anti-design-vue·view design
前端摸鱼匠1 天前
Vue 3 的watchEffect函数:介绍watchEffect的基本用法和特点
前端·javascript·vue.js·前端框架·ecmascript
S***y3961 天前
前端微前端框架对比,qiankun与icestark
前端·前端框架