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>