手写vue的mvvm实现原理
1:mvc和mvvm的区别?
MVC:modal-view-controller,比较直观的架构模式;
用户操作 --->>view层(展示层以及用户交互等)--->controller(对应用户交互后的业务逻辑处理)---->>modal(数据持久化)---->view(将结果反馈回给view)
MVVM:将 “数据模型/数据双向绑定” 思想作为核心,因此没有controller层,view和modal间没有联系,通过view modal进行交互,且modal和 viewmodal之间的交互是相互的,因此,view层的数据变化,同时会修改数据源中的数据,
vue的mvvm模式:数据劫持, object.definePropterty、发布订阅
angular的mvvm模式是通过脏值检测实现
2实现vue的mvvm
2.1 明确Object.defineProperty()用法
定义
MDN中定义:Object.defineProperty()方法会直接在一个对象上定义一个新的属性,或者修改一个对象的现有属性,并返回这个对象。
语法
Object.defineProperty(obj,prop,descriptor)
参数:obj
要在其上定义属性的对象,即最终改变的属性主体
参数:prop
要定义或修改的属性的名称
参数:obj
将被定义或或修改的属性描述符
三个参数中前两个比较好理解,但是最后一个属性描述符是重点需要关注的,根据mdn中描述,对象里目前存在的属性描述符两种主要形式:** 数据描述符和存取描述符**。数据描述符是一个具有值的属性,该属性可能是可写的,也可能是不可写的。存取描述符是由getter-setter函数对描述的属性。
网友评论