MVVM简介
Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。
MVVM 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。
MVVM组成
View层
View是视图层, 也就是用户界面, 通过前端的 HTML,CSS来构建
Model层
Model 是数据模型, 泛指后端的各种业务逻辑处理和数据操控,只要围绕数据库系统展开
后端: 负责业务逻辑和数据处理, 为前端提供接口
前端: 使用结构, 通过发送ajax请求拿到数据进行渲染即可
ViewModel层
视图模型, 内部实现了数据的双向绑定, 既可以通过控制视图来控制数据, 也可以通过控制数据来控制视图
由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。
vue中的MVVM
MVVM 已经相当成熟了，主要运用但不仅仅在网络应用程序开发中，国内流行的vue框架虽然没有完全遵循 MVVM 框架，但是Vue的设计也受到它的启发， 下图是Vue双向数据的示意图：
实现vue中简单数据双向绑定
数据劫持
- 作用: 对数据的获取或者修改都会被劫持
- 语法 :
Object.defineProperty(对象名,属性名,修饰的对象) - 修饰对象中函数
get() {
return '值'
} // 只要是对绑定的属性进行了获取,都会被get函数劫持, 执行get函数, get函数的执行结构会作为返回值
set (value) {
'处理值的操作' // 被set劫持后,原来的赋值操作不会再执行, 属性的赋值取决于set函数的执行
} // 只要是对属性的设置,都会被set函数劫持, 执行set函数, set函数的参数value就是对属性设置的值
//假设绑定的是obj.name
obj.name = '张三' // 此时该操作会被set函数劫持, set中的value就是此处设置的 '张三'
简单实现
// 双向数据绑定的效果
// 1. 视图修改了, 数据自动更新
// 2. 数据修改了, 视图自动更新
// 数据
const obj = {
msg: 'hello world'
}
const inp = document.querySelector('input')
const p = document.querySelector('p')
// 初始化视图
inp.value = obj.msg
p.innerText = obj.msg
// 1. 视图修改了, 数据自动更新
inp.addEventListener('input', function() {
obj.msg = this.value
})
// 2. 数据修改了, 视图自动更新
// 需求: 如果数据修改了, 我要能够知道这个数据修改了, 才能进行额外的视图的更新
// 问题: 如何知道数据修改了呢 ?
// vue中使用的数据劫持的语法, 只要用户获取 或者 修改数据, 都能够劫持到
// Object.defineProperty => es5的语法, 有兼容性: ie9+ 不支持IE678
// 由于js的语法的限制, Object.defineProperty 对于数组无法监听的, 在vue中数组会有一些小bug
// vue3.0草案, 已经对这进行了修复, 使用劫持语法 => es7 proxy 代理, 可以劫持数组和对象的变化
let temp = obj.msg
Object.defineProperty(obj, 'msg', {
get () {
return temp
},
set (value) {
// 只要数据修改了, 视图就要更新
temp = value
// 修改数据了的同时, 更新视图
inp.value = temp
p.innerText = temp
}
})
