首页 > 其他分享 >单向绑定vs双向绑定、单向数据流vs双向数据流

单向绑定vs双向绑定、单向数据流vs双向数据流

时间:2023-01-11 16:01:57浏览次数:29  
标签:绑定 单向 组件 vs 双向 数据流

参考文章:http://www.qb5200.com/article/482839.html

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

单向绑定vs双向绑定

react采用单向绑定,vue采用单向绑定和双向绑定。

在React中Veiw发生改变,用户通过发生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的语法糖。

双向绑定可以简化开发,但是数据变化不透明。

单向数据流vs双向数据流

 

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

vue和react都是单向数据流,虽然vue有双向绑定v-model,但是react和vue父子组件之间的数据传递,仍然遵循单向数据流的,父组件可以向子组件传递props,子组件不能修改父组件的props,只能通过事件通知父组件修改。

通过单向数据流的模型,所有状态的改变可记录、可跟踪,相比于双向数据流更容易维护与定位问题。

v-model只是语法糖,并不是真正的双向数据流,它不能直接修改父组件的值,比如你在v-model中绑定props中的值是会报错的,它只能绑定组件的值

真正的双向数据流,比如AngularJs,是允许在子组件中直接修改父组件的值

 

标签:绑定,单向,组件,vs,双向,数据流
From: https://www.cnblogs.com/Luffy-RedRoc/p/17042683.html

相关文章

  • ESP-IDF4.4 VScode安装问题
    一般安装ESP-IDF的环境是不会出错的,一路点击下去即可【ESP-IDFv4.4.3-OfflineInstaller下载地址】。主要是VScode安装ESP-IDF插件的时候会有以下两个问题WARNING:Y......
  • 不用VS,使用NET 7.0 SDK (v7.0.101)编程c#控制台应用程序方法
    摘要:如果没有vs环境,也可以编程c#控制台应用程序学习c#,方法步骤有下面几个步骤。1、下载NET7.0SDK(v7.0.101)安装网址https://dotnet.microsoft.com/zh-cn/download/do......
  • VS2022 17.1.6在windows10下打开winform设计器报timed out while connecting to named
    .net6.0的项目,vs202217.1.6在windows10下打开winform设计器报timedoutwhileconnectingtonamedpipe错误,同样的项目在windows7却可以打开winform设计器,很奇怪。N多......
  • vscode快捷键
    alt+鼠标左键添加cursorshift+alt+down在当前cursor下一行添加cursorshift+alt+up在当前cursor上一行添加cursorshift+alt+left减小工作区shift+alt+right增加工作区s......
  • Binding to List Data 绑定到列表数据
    得到当前项1voidbirthdayButton_Click(objectsender,RoutedEventArgse){2//Getthecurrentpersonoutofthecollectionview3Peoplepeople=(People......
  • 力扣 295. 数据流的中位数[堆]
    295.数据流的中位数中位数是有序整数列表中的中间值。如果列表的大小是偶数,则没有中间值,中位数是两个中间值的平均值。例如 arr=[2,3,4] 的中位数是 3 。......
  • VS Code调试Unity程序之2023最新版
    问题换了台开发机,重新安装了下开发环境。突然发现VisualStudioCode无法用来调试Unity了。明明流程都是按照Unity官方教程2023.1进行的,可在创建Launch.json文件时,死活出......
  • VS调试release程序
    按如下设置vs工程属性:cmake生成带调试信息的release工程set(CMAKE_CXX_FLAGS_RELEASE"$ENV{CXXFLAGS}-Od-Wall")set(CMAKE_CXX_FLAGS"${CMAKE_CXX_FLAGS......
  • vscode 协议
    //grep.app|codesearch https://grep.app/search?q=vscode%3A//vscode-remote'atom'=>'atom://core/open/file?filename={file}&line={line}','emacs'=>'......
  • github vscode-markdown-preview-enhanced 自定义主题
    ctrl+shift+p,MarkdownPreviewEnhanced:CustomizeCSS打开之后,把.markdown-preview-enhanced.markdown-preview给删掉https://github.com/shd101wyy/vscode-ma......