Three front end frameworks: data binding and data flow

Alfred 2021-02-23 00:17:09
end frameworks data binding data


preface

In the framework of the front three main streams , We may often hear React It's a one-way data flow , Using one-way data binding , and Vue 2.x It's also one-way data flow , But it also supports one-way data binding and two-way data binding , and Angular and AngularJS It's different , What is the relationship between data binding and data flow ? Is one-way data binding equivalent to one-way data flow ? If you support bidirectional data binding, it must be bidirectional data flow ? This article will clarify the relationship and difference between data binding and data flow in the three front-end frameworks .

notes : If not specified in the following article Vue Version of , The default represents Vue 2.x .Angular Generally speaking, it means Angular 2 And above , and AngularJS Specifically Angular All of the 1.x edition .

One way data binding vs Two way data binding

Data binding , Is refers to View Layer and the Model The mapping between layers .

One way data binding :Model The update of will trigger View Update , and View The update for will not trigger Model Update , Their role is one-way .

Two way data binding :Model The update of will trigger View Update ,View The update of will also trigger Model Update , They interact with each other .

 Single and double data binding

React Using one-way data binding

React One way data binding

When users access View when , By triggering Events Interact , And in the corresponding Event Handlers in , Will trigger the corresponding Actions, and Actions By calling setState Method pair View Of State updated ,State The update will trigger View Re rendering of .

It can be seen that , stay React in ,View Layers cannot be modified directly State, Must pass the corresponding Actions To operate .

Advantages and disadvantages of one-way number binding :

advantage : All state changes can be recorded 、 track , State changes are triggered by manual calls , The source is easy to trace .

shortcoming : There will be a lot of similar boilerplate code , The amount of code will increase accordingly .

Vue Support one-way data binding and two-way data binding

  • One way data binding : Use v-bind Attribute binding 、v-on Event binding or interpolation form {{data}}.
  • Two way data binding : Use v-model Instructions , The user to View Your changes will be synchronized directly to Model.

Vue Bidirectional data binding refers to the use of v-model Instructions for data binding , and v-model Essentially, v-bind and v-on Combined grammar sugar , It's the framework that automatically implements the update event . let me put it another way , We can take one-way binding , Self implementation of similar two-way data binding .

Advantages and disadvantages of bidirectional data binding :

advantage : Use... When working with forms v-model Convenient and simple , Tedious or repetitive... Can be omitted onChange Event to handle changes in each form data ( Reduce the amount of code ).

shortcoming : It belongs to black box operation , It can't track the change of bi-directional binding data very well .

Angular Support one-way data binding and two-way data binding

  • One way data binding : Use [x] Attribute binding 、(x) Event binding or interpolation form {{data}}.
  • Two way data binding : Use [(x)] grammar , The user to View Your changes will be synchronized directly to Model.

Except in grammar ,Angular Bidirectional data binding and Vue similar , It's also grammar sugar ,[(x)] Syntax combines attribute binding [x] Binding with Events (x).

AngularJS Support one-way data binding and two-way data binding

  • One way data binding : Use ng-bind Instruction or interpolation form {{data}}.
  • Two way data binding : Use ng-model Instructions , The user to View Your changes will be synchronized directly to Model.

AngularJS Two way data binding implementation principle and Angular Completely different , Its implementation principle can be referred to This article .

One way data flow vs Bidirectional data flow

Data flow , It refers to the data flow between components .

React、Vue as well as Angular It's all one-way data flow

although Vue and Angular There's bidirectional data binding , but Vue and Angualr Data transfer between parent and child components , Still following one-way data flow , That is, the parent component can pass props, But the child component can't modify the props, A child component can only notify its parent component of data changes through events . As shown in the figure below :

 One way data flow between components

advantage : Because component data transfer has only one entry and only one exit , Make the program more intuitive 、 Easier to understand , It's good for program maintainability .

AngularJS Support bidirectional data flow

Bidirectional data flow , It means that the data of the parent component can be updated directly in the child component .

shortcoming : As component data changes, there may be more than one source entry , If there is no corresponding “ management ” methods , It's easy to confuse the direction of data flow . At the same time, it also increases the error rate debug The difficulty of .

Data flow and data binding

Strictly speaking , Data flow and data binding are two concepts , It's not the same thing . One way data flow can also support two-way data binding , Bidirectional data flow can also support unidirectional data binding .

Briefly summarize the differences between data flow and data binding of the three front-end frameworks :

 The difference between data flow and data binding of the three front-end frameworks

Reference resources

Vue Isn't one-way data flow and two-way data binding conflicting ?

Advantages and disadvantages of one-way data binding and two-way data binding

The front three frames vue,angular,react A hodgepodge

版权声明
本文为[Alfred]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222161540299W.html

  1. 【微前端】微前端最终章-qiankun指南以及微前端整体探索
  2. Vue-Cli 创建vue3项目
  3. Go in the front of the progress of u boot v7.0 U disk boot disk production tools
  4. 使用NTLM的windows身份验证的nginx反向代理
  5. Rust教程:针对JavaScript开发人员的Rust简介
  6. 使用 Serverless Framework 部署个人博客到腾讯云
  7. #研發解決方案#易車前端監控系統
  8. Vue changes localhost to IP address and cannot access
  9. JavaScript进阶学习
  10. HTML5 from entry to proficient, realize annual salary 10W +, zero basic students must see
  11. Vue:vuex状态数据持久化插件vuex-persistedstate
  12. Vue source code analysis - start
  13. Vue -- the child component calls the method of the parent component and passes parameters --- props
  14. React-Native 获取设备当前网络状态 NetInfo
  15. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  16. How to learn HTML5? How can Xiaobai start HTML5 quickly?
  17. HTML + CSS detailed tutorial, this article is enough, but also quickly save
  18. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  19. Why Vue uses asynchronous rendering
  20. JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
  21. vue判断elementui中el-form是否更新变化,变化就提示是否保存,没变就直接离开
  22. 算法题:两数之和——JavaScript及Java实现
  23. 高性能 Nginx HTTPS 调优
  24. Why Vue uses asynchronous rendering
  25. day 31 jQuery进阶
  26. day 30 jQuery
  27. CSS whimsy -- using background to create all kinds of wonderful backgrounds
  28. Why are more and more people learning front end?
  29. What do you do with 4K front-end development?
  30. 8 years of front-end development knowledge precipitation (do not know how many words, keep writing it...)
  31. What is the annual salary of a good web front end?
  32. Front end novice tutorial! How to get started with web front end
  33. Will the front end have a future?
  34. Is the front end hard to learn?
  35. Seven new Vue combat skills to improve efficiency in 2021!
  36. Is front end learning difficult?
  37. How about the process of Web front-end development and self-study?
  38. Front end learning route from zero basis to proficient
  39. What is the basis of learning front end?
  40. What knowledge points need to be learned for self-study front end? How long can I become a front-end Engineer?
  41. An inexperienced front-end engineer, what are the common problems when writing CSS?
  42. HttpServletRequest get URL (parameter, path, port number, protocol, etc.) details
  43. Springboot starts http2
  44. Enabling http2.0 in spring boot
  45. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  46. Using JavaScript in Safari browser history.back () the page will not refresh after returning to the previous page
  47. vue.js Error in win10 NPM install
  48. In less than two months, musk made more than $1 billion, more than Tesla's annual profit
  49. Springboot starts http2
  50. Vue event bus
  51. JQuery easy UI tutorial: custom data grid Pagination
  52. Using okhttp and okhttpgo to obtain onenet cloud platform data
  53. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  54. HTTP 1. X learning notes: an authoritative guide to Web Performance
  55. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control
  56. HTTP 1. X learning notes: an authoritative guide to Web Performance
  57. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
  58. Event bubble and capture in JavaScript
  59. The root element is missing solution
  60. Event bubble and capture in JavaScript