本文主要介绍vue的双向数据绑定原理,帮助大家更好的理解和学习Vue。感兴趣的朋友可以了解一下。
MVVM
MVVM是Model-View-ViewModel的缩写,是一种基于前端开发的架构模式。其核心是为View和ViewModel提供双向数据绑定,使得ViewModel的状态变化自动传递到View,即所谓的双向数据绑定。
Vue.js是一个Javascript库,它提供了MVVM风格的双向数据绑定,专注于视图层。其核心是MVVM的VM,即ViewModel。ViewModel负责连接视图和模型,保证视图和数据的一致性。这种轻量级架构使得前端开发更加高效便捷。
数据劫持
Vue.js是一种结合发布者-订阅者模式的数据劫持方法。它通过Object.defineProperty()劫持各种属性的setter和getter,在数据发生变化时向订阅者释放消息,触发相应的监控回调。
Object.defineProperty()
Object.defineProperty()方法将直接在对象上定义新的属性,或者修改对象的现有属性并返回该对象。
Object.defineProperty(对象,属性,描述符)
参数:
Obj -要定义属性的对象。
Prop -要定义或修改的属性的名称。
Descriptor -要定义或修改的属性描述符。
返回值:传递给函数的对象。
MVVM 的数据双向绑定步骤
1.实现一个数据监听器观察器,它可以监视数据对象的所有属性,并获取最新的值,如果有任何变化,就通知订阅者。
2.实现一个指令解析器编译,扫描解析每个元素节点的指令,根据指令模板替换数据,绑定相应的更新函数。
3.实现一个Watcher,作为连接观察者和编译的桥梁,可以订阅和接收每个属性变化的通知,执行指令绑定的相应回调函数,从而更新视图。
4.MVVM入口功能,集成以上三种。
流程如下:
实现Observer
我们知道我们可以使用Obeject.defineProperty()来监视属性更改,因此我们将需要使用setter和getter递归地遍历observe的数据对象,包括子属性对象的属性。
这样,给这个对象赋值就会触发setter,然后就可以监控数据的变化了。
实现Compile
compile主要做的事情是解析模板指令,用数据替换模板中的变量,然后初始化渲染页面视图,将更新函数绑定到每个指令对应的节点,添加订阅者来监控数据。一旦数据发生变化,它会得到通知并更新视图,如图所示:
实现Watcher
作为观察者和编译之间的桥梁,观察者订户主要做以下事情:
1.实例化自己时,将自己添加到属性订阅者(dep)中。
2.它必须有一个update()方法。
3.当通知属性change dep.notice()时,可以调用自己的update()方法,触发Compile中的回调绑定,然后就退休了。
实现MVVM
作为数据绑定的入口,MVVM集成了观察者、编译器和观察器,通过观察者监控自身模型数据的变化,通过编译解析编译后的模板指令,最后通过观察器搭建观察者和编译器之间的通信桥梁。
实现数据变更-视图更新;查看交互变化(输入)——数据模型变化的双向绑定效果。
以上是Vue双向数据绑定(MVVM)原理的详细内容。更多关于Vue双向数据绑定(MVVM)的信息,请关注我们的其他相关文章!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。