双向数据流

最新推荐文章于 2024-05-07 06:48:30 发布

wangyoucaoxiaoxiao

最新推荐文章于 2024-05-07 06:48:30 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/wangyoucaoxiaoxiao/article/details/86489065

本文探讨了双向数据流的概念，重点介绍了双向数据绑定的实现原理。当用户在view层进行更新时，model数据会自动更新；反之，JavaScript也能即时同步更新model数据到view层，确保数据的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户更新view -----------------------------> model数据自动更新

view 自动更新 <———————— js更新model数据

双向数据绑定的实现原理：

tip: view的输入变化修改了 obj.txt 而obj.txt的变化修改了showdom.innerHTML 又发生在了页面上

	示意图	数据流描述	优点	缺点
单向数据绑定		先将模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。适用于整体项目，并于追溯	1 状态改变可记录，可跟踪 2 数据只有一份，组件数据只有唯一的入口和出口，程序更直观 3 一旦数据变化，更新页面（data-页面），但是没有（页面-data） 4 如果用户在页面上变动，手动收集起来，合并到原有数据中	1. HTML代码渲染完成，无法改变，有新数据，就须把旧HTML代码去掉，整合新数据和模板重新渲染; 2. 代码量上升，数据流转过程变长，出现很多类似的样板代码; 3. 同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。
双向数据绑定		双向数据流，数据模型和视图之间的双向绑定，无论数据改变，或是用户操作都能带来互相的变动，自动更新	1. 用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去； 2. 无需进行和单向数据绑定的那些CRUD（Create，Retrieve，Update，Delete）操作； 3. 在表单交互较多的场景下，会简化大量业务无关的代码。	1. 无法追踪局部状态的变化； 2. “暗箱操作”，增加了出错时 debug 的难度； 3. 由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱