mvvm和双向数据绑定

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/RyleeLouth/article/details/102756230

mvvm

这是在官网上面截取的一张图

1，mvvm其实是mvc的一种单独的解读，也是一种分层思想只不过mvc是更适合在nodejs中，mvvm存在于前端
2，m–>model，v–>view，vm–>view model，这里m就是模型，是一个对象，我们把对象里面的属性叫做模型变量
v就是视图，
vm相当于c，也就是控制器，这也是为什么我们习惯把vue的实例对象命名为vm的原因

双向数据绑定

1 什么是双向数据绑定

就是例如我们在输入表单时，view的状态更新了，而且此时model的模型变量也更新了，反过来说，就是当我们改变了model时，view的状态也更新了，那么我们就说view和model之间做了数据的双向绑定

2 双向绑定的底层原理是什么？

（1）es5中 Object.definedProperty(参数1，参数2，参数3)
参数1：监视的对象，例如：data，
参数2：要监视的属性,例如：data中name这个模型变量，
参数3：是一个对象，对象里面有set和get方法，set方法：当我们给对象的属性进行属性值的设置时执行；get方法：当我们获取对象的属性是执行
（2）es6中：proxy：这个api可以拦截对象属性的get和set操作

如何解释Vuejs中的数据双向绑定的原理?

1在vuejs中，会对data模型里面的每个模型变量进行 Object.definedProperty（）的调用，
2会为每个模型变量增加一个get和set方法，用于拦截数据，然后把数据的处理权限交给vuejs进行处理，
3处理之后vuejs会使用观察者设计模式（订阅和发布）来实现页面数据的渲染