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