MVC、MVVM的区别

59 阅读1分钟

MVC:前后端不分离Model(数据层 存改数据)-view(视图层 页面展示及DOM操作)-controller(控制视图层和数据层的关联,主要通过监听DOM事件)

MVVM: 前后端分离Model-View-ViewModel

vue采用数据劫持结合发布-订阅者模式的方式,通过object.defineProperty()来劫持各个属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

Object.defineProperty

直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此方法。此方法有三个参数[属性所在的对象、要操作的属性、被操作的属性]

MVVM:通过Object.defineProperty+addEventListener对data的每个属性进行get\set的拦截

<body>
   <input type=’text’ id=’inputDom’/><p>当前input输入值为:<span if=’spanDom’></span></p>
   <script>
     let inputDom = document.getElementById(‘inputDom’);
     let spanDom = document.getElementById(‘spanDom’);
     let obj = { value :null }
     Object.defineProperty(obj,’value’,{
	get:function( ){  },
	set:function( res ){ 
	     inputDom.value =res;
	     spanDom.innerHTML = res; 
	},
     });
     inputDom.addEventListener(‘keyup’,function( e ){ obj.value = e.target.value })
   </script>
</body>