- MVC和MVVM有什么区别 click
都是为了解决Model和View耦合的问题
1、mvvm各部分的通信是双向的,而mvc各部分通信是单向的;
2、mvvm是真正将页面与数据逻辑分离放到js里去实现,而mvc里面未分离。
MVC:主要应用于后端,前端早期也有应用,有点事分层清晰,缺点是数据流混乱,灵活性带来维护性问题
MVP:MVC的进化,presenter作为中间层负责MV通信,解决了耦合问题,大P层过于臃肿导致维护问题
MVVM:不仅解决了MV耦合问题,还解决了维护两者映射关系的大量繁杂代码和DOM 操作代码,在提高开发效率,可读性同时还保持了优越的性能表现。
ViewModel:1、通过实现一套数据响应式机制自动响应Model中数据变化
2、实现一套更新策略自动将数据变化转换为视图更新
3、通过事件监听响应View中用户交互,修改Model中数据
4、ViewModel中减少了大量DOM操作(虚拟DOM做更新)
5、减少了View和Model松耦合的同时,还减少了维护他们关系的代码,使用户专注于业务逻辑,兼顾开发效率和可维护性。
- v-bind和v-model区别。
v-bind:数据变化==>视图变化,是单向的。绑定数据和属性以及表达式,click;
v-model:双向数据绑定,表单元素(input、textarea、select)外不起作用。 - vue双向数据绑定的实现
文章: click
详解:click
视频:click
微信文章click
视图变化影响属性通过绑定监听事件
数据影响视图:观察者(observer)观察数据,当发现数据发生变化的时候通知所有的订阅者(watcher)更新视图,如下:
1、对所有的data进行响应化处理(劫持监听所有data,数据更新视图通过Object.defineProperty(obj,prop,descriptor)的set方法)==> observe
2、编译模板,找到其中动态绑定的数据,使用data初始化视图 ==>compile
3、每个节点定义一个订阅者(watcher)和一个更新函数,当数据发生变化时watcher便调用对应更新函数
4、data中一个key被视图多个地方使用,需要为每一个key定义一个管理watcher的管家:dep
5、key发生变化便通知dep,dep通知所有watcher执行更新函数(set中进行)
VUE2.0版本核心为Object.defineProperty(obj,prop,descriptor),翻译:为对象定义属性,它的set方法用于数据劫持,并通知所有watcher。obj:定义其上属性的对象;prop:要定义或修改的属性;descriptor:具体的改变方法。obj.prop调用其get方法,get方法中添加订阅者;obj.prop = ‘something’ 调用其set方法。通过劫持setter,实现model到view。
ES6原生使用proxy修改get、set实现数据劫持:let obj1=new Proxy(obj2,handler),将obj1是obj2包装后的对象,仅多了一层包装,当访问对象时一定经过拦截
详细实现 ---->【数据劫持】结合【发布-订阅】的方式实现。