双向数据绑定原理

最新推荐文章于 2024-08-08 08:58:25 发布

Cry-0707

最新推荐文章于 2024-08-08 08:58:25 发布

阅读量9.5k

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/LHLMN/article/details/109313579

版权

本文探讨了双向数据绑定的实现，通过数据劫持、setter、getter和`Object.defineProperty()`来实现。首先，介绍了数据监听器observer如何监听数据变化，并通知订阅者。接着，解释了指令解析器compile的作用，它解析元素节点和指令，绑定更新函数。然后，阐述了watcher作为桥梁的角色，订阅属性变化并更新视图。最后，提到了setter和getter在对象属性中的作用，以及`Object.defineProperty()`用于定义或修改对象属性的方法。

摘要由CSDN通过智能技术生成

1.双向数据绑定是通过数据劫持结合发布订阅者的模式和object.defineproprety()来劫持各个属性的setter、getter，如果数据有变动，就发布消息给订阅者触发监听。

2.双向数据绑定的步骤：
**第一步：**实现一个数据监听器observer，能够对数据对象的所有属性就行监听。如果有变动就拿到最新值并通知订阅者。
**第二步：**实现一个指令解析器compile，对每个元素节点和指令进行扫描和解析，根据指令模板替换数据以及绑定相应的更新函数。
**第三步：**实现一个watcher，作为链接observer和compile之间的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。
**第四步：**实现一个MVVM作为数据绑定的入口，作为Observer、compile、watcher之间的桥梁，通过observer来监听自己的modle数据变化，通过compile来解析扫描模板指令，最终利用watcher搭起observer和compile之间的桥梁，实现双向数据绑定的效果。