Javascript

vue 双向数据绑定原理

本文主要是介绍vue 双向数据绑定原理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
　　vue 通过使用双向数据绑定，来实现了 View 和 Model 的同步更新。vue 的双向数据绑定主 要是通过使用数据劫持和发布订阅者模式来实现的。 　　首先我们通过 Object.defineProperty() 方法来对 Model 数据各个属性添加访问器属性， 以此来实现数据的劫持，因此当 Model 中的数据发生变化的时候，我们可以通过配置的 setter 和 getter 方法来实现对 View 层数据更新的通知。 　　数据在 html 模板中一共有两种绑定情况，一种是使用 v-model 来对 value 值进行绑定，一 种是作为文本绑定，在对模板引擎进行解析的过程中。 　　如果遇到元素节点，并且属性值包含 v-model 的话，我们就从 Model 中去获取 v-model 所 对应的属性的值，并赋值给元素的 value 值。然后给这个元素设置一个监听事件，当 View 中 元素的数据发生变化的时候触发该事件，通知 Model 中的对应的属性的值进行更新。 　　如果遇到了绑定的文本节点，我们使用 Model 中对应的属性的值来替换这个文本。对于文本节 点的更新，我们使用了发布订阅者模式，属性作为一个主题，我们为这个节点设置一个订阅者对 象，将这个订阅者对象加入这个属性主题的订阅者列表中。当 Model 层数据发生改变的时候， Model 作为发布者向主题发出通知，主题收到通知再向它的所有订阅者推送，订阅者收到通知 后更改自己的数据。
这篇关于vue 双向数据绑定原理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航