vue中单向数据流和双向绑定

最新推荐文章于 2023-06-15 08:12:08 发布

置顶

江南Code

最新推荐文章于 2023-06-15 08:12:08 发布

阅读量504

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43310551/article/details/89961414

版权

本文探讨Vue框架中的单向数据流和双向绑定概念。单向数据流确保了状态改变的可追溯性，防止子组件意外修改父组件状态。而双向绑定则是数据与视图间的便捷交互。然而，单向数据流可能导致数据传递复杂，尤其是跨多层级组件通信。

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

Vue官网 https://cn.vuejs.org/

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

一、Vue中的单向数据流和双向绑定
1、vue中单向数据流理念的简单示意图

  state:驱动运用的数据源
  view:以申明方式将state映射到视图
  actions:响应view上用户输入导致的状态变化

在这里插入图片描述
一个简单的单向数据流的例子：用户在视图层(view）输入,view发出用户交互的Action，在Action里对state进行相应更新，state更新后触发视图(view)更新。

vue组件之间的数据传递也是单向数据流的,父级 prop 的更新会向下流动到子组件中。当父组件的数据更新时,子组件所有的prop都将更新为最新值。但是反过来不行。通俗点讲就是：父组件中数据的改变了，子组件相应的数据(父组件中的值)也会改变，但子组件中数据的改变，父组件中的值不会改变。

2、vue中的双向数据绑定(双向数据流)指的是数据(state)h和视图(view)之间的双向绑定。这其实是value的单向绑定+onChange(oninput)事件监听的一个