关于vue项目中mvvm模式的理解

Posted 2020-10-24 mrzhu

欲谈mvvm 必谈mvp，欲谈mvp 必谈mvc

 

mvc模式：view监听model，controller监听view并改变model，model被改变触发view的改变

mvc的两个问题：

　　1:view与model高度耦合

　　2:controller太重

 

mvp模式：MVP的目的在于隔离model和view，view复杂界面的展示逻辑，model负责数据的处理逻辑，Presenter复杂整合view层和model层

//model层
function userModel(data){
  this.name = data.name;
  this.avatar = data.avatar;
}
function getUserData(){
  return fetch("http://test.com/getUSer")
  .then(function(response){
    var userData = response.data;
    return new userModel(userData)
  })
}
//Presenter层
function userPresenter(){
  var userData = getUserData();//网络请求获取用户数据
  userData.then(function(userData){
    new userView().showUserMes(user);
  })
}
//view层
function userView(){

}
userView.prototype.showUserMes = function(userData){
  document.getElementByID("username").value = userData.name;
  document.getElementByID("useravatar").value = userData.avatar;
}

如图在view层编写基本的视图逻辑，而数据层编写基本的数据请求，在presenter层复杂将两者整合起来，这样达到了view与model分离的目的，同时将业务逻辑中视图方面的逻辑放入到view层

mvvm模式：mvvm模式主要是在于v-vm和v-p的改变，mvvm的双向数据绑定优化了v-p模式下关于view层与presenter层的交互。其他地方则与mvp无异，