什么是mvvm？
mvvm是Model-View-ViewModel的缩写，好吧，这样讲还是不知道这到底是个什么鬼，我们可能得先来看一下前端的发展史，有助于我们理解什么是mvvm以及我们为什么需要它。大致分为以下几个阶段：
- 用户看的网页是一样的，没有交互
html是完全静态的网页，当你访问url时，服务器直接返回html文件给浏览器渲染 - 用户看到的网页是不一样的，没有交互
html是由服务端根据不同情况拼接而成，当你访问url时，服务器直接返回拼接好的html给浏览器渲染
- 2-1. 用户看到的网页是不一样的复杂的html，没有交互
当html很复杂的时候，出现大量的重复html，由此产生模板变量
- 用户交互，需要更新页面内容
重新获取一份html显然是不好的，由此催生了javascript，有了js才有了如今看见的这些花哨的网页 - js操作DOM节点，使用浏览器提供的原生api
原生api并不好用加上各大浏览器提供的api各不相同，处理兼容性变得尤其困难 - jquery横空出世完美解决api的易用性以及浏览器兼容性问题
交互要求更多 - MVC模式，允许js在前端修改页面样式或数据（后端配合完成）
交互要求更花哨 - mvvm模式
Model由js对象表示，View负责显示，做到模型和视图最大限度的分离，而ViewModel充当模型和视图的中间人，把模型的数据同步到视图，把视图的修改同步回模型，这样做的好处是什么呢？js不用再频繁的操作dom节点，而是把注意力都放在Model这个js对象上
vue.js可以说是mvvm架构最好的实现
那么vue是怎么实现ViewModel的呢？object.defineProperty()的set和get方法以及观察者模式实现
object.defineProperty()
object.defineProperty()可以直接在一个对象上定义一个新属性或修改对象已有的属性
举个例子：
var a = {}
Object.defineProperty(a,"x",{
value:12,
enumerable:true,
configurable:true,
})
a //{x: 12}
for(var key in a ){
console.log(key)
}
x
Object.keys(a) // ["x"]
此方法的第三个参数为属性描述符，属性描述符有数据描述符和存取描述符两种形式，上面的例子是数据描述符，存取描述符有get和set两种可选键值：get函数是在访问时执行，set函数在改写属性时执行，举个例子
var a = {}
var x_value
Object.defineProperty(a, 'x', {
enumerable: true,
configurable: true,
get: function () {
return x_value
},
set: function (new_value) {
x_value = new_value
}
})
a.x = 99;
x_value // 99
x_value = 100;
a.x // 100
这里a.x的值和x_value就形成关联了，当其中一个改变时，另一个也会改变
网友评论