VUE 单向数据流与双向数据绑定

单向绑定 vs 双向绑定

单双向绑定,指的是View层和Model层之间的映射关系。

react采取单向绑定,如图所示:

https://upload-images.jianshu.io/upload_images/20026007-2c3369bab52b6d2e.png

用户访问View,用户发出交互到Actions中进行处理,Actions中通过setState对State进行更新,State更新后触发View更新。可以看出,View层不能直接修改State,必须要通过Actions来进行操作,这样更加清晰可控

vue支持单向绑定和双向绑定

  • 单向绑定:插值形式{{data}},v-bind也是单向绑定
  • 双向绑定:表单的v-model,用户对View层的更改会直接同步到Model层

实际上v-model只是v-bind:value 和 v-on:input的语法糖,我们也可以采取类似react的单向绑定。
vue的v-model在操作表单是,显得很简单,我们不用去写繁琐的onChange事件去处理每个表单数据的变化,但是双向绑定也会导致数据变化不透明,不清晰可控。优点和缺点共存,有时候一个人的优点也是一个人的缺点,道理都是相通的。

单向数据流 vs 双向数据流

数据流指的是组件之间的数据流动。

vue和react仅单向数据流

虽然vue有双向绑定v-model,但是vue和react父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改,如图所示:

https://upload-images.jianshu.io/upload_images/20026007-914981455efc46de.png?imageMogr2/auto-orient/strip|imageView2/2/w/386/format/webp

优点是所有状态的改变可记录、可跟踪,源头易追溯; 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性

angularJs可以双向数据流

相比之下,元老级框架AngularJS却不一样,它允许在子组件中直接更新父组件的值

数据流与绑定

准确来说两者并不是一回事。单向数据流也可有双向绑定,双向数据流也可以 有双向绑定
但是很多资料混为一谈

https://upload-images.jianshu.io/upload_images/20026007-f517bdcaa8f0c3f4.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp

你可能感兴趣的:(笔记,vue.js,前端,javascript)