Vue中的MVVM设计模式

1、传统的MVP设计模式: 是面向DOM进行开发的。
model:数据层/模型层
view:视图层
presenter:逻辑层/控制器,是view和model的中转站,也是mvp中的核心部分。
在这里插入图片描述

2、MVVM设计模式: 是面向与数据本身进行开发,编码的重点在于view和model,其核心是M层,V层的变化会根据M层数据的变化而变化。Vue采用了MVVM的设计模式,操作数据,数据变了,页面也会随之改变,不操作DOM结构,vue底层会自动根据数据变化重新渲染页面,采用该设计模式与MVP相比可以减少可观的代码量。
M层:数据层,负责存储data数据。
V层:视图层,负责显示页面内容。
VM层:vue内置(用来监听M层的数据是否发生改变,如果发生改变,则改变试图),不需要自己编写,是Vue自带的,包含有DOM Listeners+Data Bindings。
在这里插入图片描述
(MVVM设计模式的优点)
● 低耦合:View可以独立于Model变化和修改,同一个ViewModel可以被多个View复用;并且可以做到View和Model的变化互不影响;
● 可重用性:可以把一些视图的逻辑放在ViewModel,让多个View复用;
● 独立开发:开发人员可以专注与业务逻辑和数据的开发;
● 可测试性:清晰的View分层,使得针对表现层业务逻辑的测试更容易,更简单。

注意:如何理解数据的双向绑定?
当input的值改变就会修改data里边的inputValue变量的值,同样如果data里边的inputValue值改变了,input框中的值也会随之而发生变化。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕斯-ing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值