Vue——MVP设计模式与MVVM设计模式

最新推荐文章于 2024-02-15 10:15:11 发布

方格田

最新推荐文章于 2024-02-15 10:15:11 发布

阅读量403

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/qq_43393963/article/details/99452504

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

传统MVP设计模式

M 模型层
V 视图，可以触发事件
P 控制器，通过dom操作改变视图（核心）

下面的代码实现的功能是：在输入框输入文字，点击提交后在下方以列表形式显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	=>引入了jQuery	
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<input type="text" id="input"/>
			<button id='btn'>提交</button>
			<ul id="ul"></ul>
			
		</div>
		
		===
		 M 模型层
		 V 视图，可以触发事件
		 P 控制器，通过dom操作改变视图（核心）
		===
		
		<script type="text/javascript">
			function Page(){}
			$.extend(Page.prototype,{
				init:function(){
					this.bindEvents()
				},
				bindEvents:function () {
					var btn=$('#btn');
					btn.on('click',$.proxy(this.handleBtnClick,this)) 
					// $.proxy 用于改变this的绑定
				},
				handleBtnClick:function () {
					// alert('123')
					var inputElem=$("#input");//获取input框元素
					var inputValue=inputElem.val();//取input框的内容
					var ulElem=$("#ul");
					ulElem.append('<li>'+inputValue+'</li>');
					inputElem.val('');
				}
			})
			var page=new Page();//创建实例
			page.init();
		</script>
	</body>
</html>

MVP的主要特点:

把Activity里的许多逻辑都抽离到View和Presenter接口中去，并由具体的实现类来完成。
View与Model不直接交互，而是通过与Presenter来完成交互
Presenter中除了应用逻辑以外，还有大量的View->Model，Model->View的手动同步逻辑，会导致Presenter臃肿，维护困难

MVVM设计模式

在这里插入图片描述
MVVM的特点:

可以将ViewModel看作是Model和View的连接桥梁，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离。
在 MVVM 设计模式中， Model 层负责存储数据，View 层用于显示数据。但 MVVM 设计模式中，没有 Presenter 层，取而代之的是ViewModel层级。
而ViewModel并不需要我们来进行编写，使用 MVVM 设计模式进行编码的时候，无需关注ViewModel这一层是如何实现的，它完全是 Vue 内置的。而我们只需要更多的关注 M 层与 V层，即模型层和视图层。
在Vue框架下，我们可以直接操作数据而不是dom元素来实现View的改变

结合代码说明MVVM设计模式，与上面的代码执行同样的功能：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	
	=>在Vue操作中，只改变数据层，然后Vue实例会根据数据的
	变化来渲染dom，我们并不再控制dom元素了
	
	=>MVVM设计模式	
	<body>
		<!--  V层  -->
		<div id='app'>			
			<!-- v-model 轻松实现表单输入和应用状态之间的双向绑定，当输入框中内容变化时，Vue实例中的data中的inputValue也会变化-->
			<input type="text" v-model="inputValue" />			
			<button v-on:click="handleBtnClick">提交</button>
			<!-- 绑定事件 -->
			<ul>
				<li v-for="item in list">{{item}}</li>
			</ul>
		</div>
		
		=>VM层（ViewModel） 即Vue，监听视图层和数据M层
		
		<script>
			=>M层,关注数据
			
			var app=new Vue({
				el:'#app',
				data:{
					list:[],
					inputValue:''
				},
				methods:{//把方法定义在methods中
					handleBtnClick:function(){
						this.list.push(this.inputValue);
						this.inputValue=''
					}
				}
			})
		</script>
	</body>
</html>