简析mvvm框架
目前angular,reat和vue都是mvvm类型的框架
以vue为例
这里的vm 就是vue框架，它相当于中间枢纽的作用,连接着model 和view.
- 当前台显示的view发生变化了，它会实时反应到viewModel上，如果有需要，viewModel 会通过ajax等方法将改变的数据 传递给后台model
- 同时从后台model获取过来的数据，通过vm将值响应到前台UI上
双向绑定原理
vm的核心是view 和 data
- 当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变
- 而view 发生改变则是通过底层的input 事件来进行data的响应更改
vue是通过Object.defineProperty()来实现数据劫持的。
Object.defineProperty( )是用来做什么的？它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，这里我们主要先来研究下它对应的两个描述属性get和set
varBook= {}
varname= '';
Object.defineProperty(Book, 'name', {
set:function(value) {
name= value;
console.log('你取了一个书名叫做'+ value);
},
get:functio<i style="color:transparent">来源gaodai$ma#com搞$代*码网</i>n() {
return'《'+ name+ '》'
}
})
console.log(Book)
Book.name= 'vue权威指南'; // 你取了一个书名叫做vue权威指南
console.log(Book.name); // 《vue权威指南》
// get 是在读取那么属性的时候触发的
// set 是在设置属性值的时候触发的
实现方法： 观察者模式
Observer（Objec.defineProperty中的set）监听data的变化，当data有变化的时候通知观察者列表Dep（里面有与data变化对应的update函数）,watcher负责向观察者列表里添加（订阅）对应的更新函数，Dep里的更新函数执行完了之后将最新的值更新到view上。
具体的代码实现可参考：https://www.cnblogs.com/libin-1/p/6893712.html
想要了解更多相关知识，可访问 前端学习网站！！
以上就是vue双向绑定原理的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue双向绑定原理
转载请注明原文链接：vue双向绑定原理
