【前端学习笔记】Vue.js MVVM双向绑定原理

版权声明:商业转载需要经过本人同意,敬上! https://blog.csdn.net/weixin_41835977/article/details/89360931

学习自:
https://juejin.im/entry/5996654451882524382f43db

目前,常用的MVVM框架有:
Angular:Google出品,名气大,但是很难用;
Backbone.js:入门非常困难,因为自身API太多;
Ember:一个大而全的框架,想写个Hello world都很困难。
所以,综合考察,最佳选择是尤雨溪大神开发的MVVM框架:Vue.js
目前,Vue.js的最新版本是2.0,我们会使用2.0版本作为示例。
单向绑定(如v-text)非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。
有单向绑定,就有双向绑定(如v-model)。如果用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。

vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的。
vue.js 则是
数据劫持结合发布者-订阅者模式
的方式。
发布者-订阅者模式
mvvm.js
complie.js
通过Object.defineProperty()来劫持各个属性的setter,getter。在数据变动时发布消息给订阅者,触发相应的监听回调,而产生更新数据和视图。
observer.js
data属性定义了getter、setter对属性进行劫持,当属性值改变是就会notify通知watch对象,而watch对象则会重新触发组件呈现功能,继而更新view上的DOM节点树。
反之,view上输入数据时,也会触发data变更,也会触发订阅者watch更新,这样子model数据就可以实时更新view上的数据变化。这样一个过程就是vue的数据双向绑定了。
watcher.js

猜你喜欢

转载自blog.csdn.net/weixin_41835977/article/details/89360931