本篇文章给大家分享的是有关Vue双向数据绑定的原理是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
MVVM是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,其核心是提供对视图和视图模型的双向数据绑定,这使得ViewModel的状态改变可以自动传递给视图,即所谓的数据双向绑定。
Vue。js是一个提供了MVVM风格的双向数据绑定的Javascript库,专注于视图层。它的核心是MVVM中的VM,也就是ViewModel。ViewModel负责连接视图和模型,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效,便捷。
vue。js是采用数据劫持结合发布者——订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,吸气,在数据变动时发布消息给订阅者,触发相应的监听回调。
Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。
Object.defineProperty (obj,道具,描述符)
参数:
- <李> obj——要在其上定义属性的对象。 <李>道具——要定义或修改的属性的名称。 <李>描述符——将被定义或修改的属性描述符。
返回值:被传递给函数的对象。
1,实现一个数据监听器观察者,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2,实现一个指令解析器编译、对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3,实现一个观察者,作为连接观察者和编译的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4, MVVM入口函数,整合以上三者。
流程如下所示:
我们知道可以利用Obeject.defineProperty()来监听属性变动,那么将需要观察的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter。
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。
编译主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图,如图所示:
观察家订阅者作为观察者和编译之间通信的桥梁,主要做的事情是:
1,在自身实例化时往属性订阅器(dep)里面添加自己
2,自身必须有一个更新()方法
3,待属性变动dep.notice()通知时,能调用自身的更新()方法,并触发编译中绑定的回调,则功成身退。
MVVM作为数据绑定的入口,整合观察者,编译和观察家三者,通过观察者来监听自己的模型数据变化,通过编译来解析编译模板指令,最终利用观察者搭起观察者和编译之间的通信桥梁。
达到数据变化→视图更新;视图交互变化(输入)→数据模型变更的双向绑定效果。
以上就是Vue双向数据绑定的原理是什么,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。
