vue框架使用mvvm设计模式来进行数据和视图的双向绑定,Vue的双向绑定数据的原理

vue框架使用mvvm设计模式来进行数据和视图的双向绑定,Vue的双向绑定数据的原理,Vue双向数据绑定(MVVM)的原理

本文主要介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: