什么是MVVM ,MVC 模型
MVC
M: model数据模型, V:view视图模型,C: controller控制器
是项目的一种分层架构思想,它把复杂的业务逻辑,抽离为职能单一的小模块,每个模块看似相互独立,其实又各自有相互依赖关系。
它的好处是: 保证了模块的智能单一性,方便程序的开发、维护、耦合度低.
mvm
M: model数据模型, V:view视图模型,VM: viewModel视图数据模型
它是一种双向数据绑定的模式,用viewModel来建立起model数据层和view视图层的连接,数据改变会影响视图,视图改变会影响数据
Vue双向绑定的原理
Vue 数据双向绑定原理是通过数据劫持 + 发布者-订阅者模式 的方式来实现的,首先是通过 ES5 提供的obiect.defineProperty() 方法来劫持(监听) 各属性的 getter、setter,并在当监听的属性发生变动时通知订阅者,是否需要更新,若更新就会执行对应的更新函数。
什么是数据劫持
数据劫持比较好理解,通常我们利用 object.defineProperty 劫持对象的访问器,在属性值发生变化时我们可以获取变化,从而进行进一步操作。
发布者模式/订阅者模式
在软件架构中,发布订阅是一种消息范式,消息的发送者(称为发布者)不会将消息直接发送给特定的接收者(称为订阅者)。而是将发布的消息分为不同的类别,无需了解哪些订阅者(如果有的话)可能存在。同样的订阅者可以表达对一个或多个类别的兴趣,只接收感兴趣的消息,无需了解哪些发布者(如果有的话)存在。
这里很明显了,区别就在于,不同于观察者和被观察者,发布者和订阅者是互相不知道对方的存在的,发布者只需要把消息发送到订阅器里面,订阅者只管接受自己需要订阅的内容
Object.defineProperty
Object.defineProperty( obi, prop, descriptor )
三个参数:
obi 要定义的对象
prop 要定义或修改的属性名称或 symbol
descriptor 要定义或修改的属性描述答
属性描述符
get
属性的 getter 函数,如果没有 getter,则为 undefined 。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的 this 并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
默认为[ undefined ]
set
属性的 setter 函数,如果没有 setter,则为 undefined 。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。默认为[ undefined ]