2021-04-19 - React的单向数据流与Vue的双向绑定

冷不防 2023-01-13 14:54 83阅读 0赞

1.应用场景

<table> 
 <tbody> 
  <tr> 
   <td>主要用于对比react与vue的数据流向，以及数据绑定的区别，从而更加好地理解前端开发框架， 以及工作中高效准确地使用它们进行开发。</td> 
  </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
  <tr> 
   <td> <p>1.文档阅读</p> <p><a href="https://www.cnblogs.com/fightjianxian/p/12445142.html" rel="nofollow">https://www.cnblogs.com/fightjianxian/p/12445142.html</a></p> <p><a href="https://blog.csdn.net/william_n/article/details/105848718" rel="nofollow">https://blog.csdn.net/william_n/article/details/105848718</a>&nbsp;//&nbsp;React 还是Vue：这是一个问题?</p> <p>&nbsp;</p> <p>2.整理输出</p> <p>&nbsp;</p> <p><img alt="" src="https://img-blog.csdnimg.cn/img_convert/f05acead6d25707b82895cb43a8f7695.png"></p> <p>&nbsp;</p> <p><img alt="" src="https://img-blog.csdnimg.cn/img_convert/7dd53d71d59c972bf24b83a0c06d93c1.png"></p> <p>小结：</p> <p>React遵循从上到下的数据流向，即单向数据流。<br> 1、单向数据流并非‘单向绑定’，甚至单向数据流与绑定没有‘任何关系’。对于React来说，单向数据流（从上到下）与单一数据源这两个原则，限定了React中要想在一个组件中更新另一个组件的状态（类似于Vue的平行组件传参，或者是子组件向父组件传递参数），</p> <p>需要进行<span style="color:#f33b45;">状态提升</span>。即将状态提升到他们最近的祖先组件中。子组件中Change了状态，触发父组件状态的变更，父组件状态的变更，影响到了另一个组件的显示（因为传递给另一个组件的状态变化了，这一点与Vue子组件的$emit()方法很相似）。<br> 2、Vue也是单向数据流，只不过能实现双向绑定。<br><span style="color:#f33b45;">3、单向数据流中的‘单向’-- 数据从父组件到子组件这个流向叫单向。<br> 4、绑定的单双向：View层与Module层之间的映射关系。</span></p> <p>&nbsp;</p> <p>案例：</p> <p><img alt="" src="https://img-blog.csdnimg.cn/img_convert/4571e8d80f42cc42c919e6dc4de49fb0.png"></p> <p>&nbsp;</p> <p>浏览器中显示：</p> <p><img alt="" src="https://img-blog.csdnimg.cn/img_convert/c9fafaf4b7fadd204fb69affd58a4725.png"></p> <p><span style="color:#f33b45;">点击按钮便不可以编辑</span></p> <p><img alt="" src="https://img-blog.csdnimg.cn/img_convert/ccf60370e25175f2ea2f4d5078f20599.png"></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>后续补充</p> <p>...</p> </td> 
  </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

后续补充

...