SAPUI5和Vue双向数据绑定实现原理对比

UI5中的双向数据绑定双向数据绑定测试：控件属性变化导致模型字段变化双向数据绑定测试：模型字段变化导致控件属性变化双向数据绑定在Vue中双向数据绑定测试：模型字段变化导致控件属性changeTwowaydatabindingtest:ControlpropertychangeleadsmodelfieldchangeStep1–ModeldirectivedetectionStep2–生成事件处理器源码Step3–将事件处理器注册到物理DOM元素Step4–modelfield会在onInput事件处理器中发生变化最近自学Vue我在互联网上发现很多文章都对Vue的反应式双向数据绑定特性赞不绝口。这让我想起了2013年初的时候自学UI5，那时候UI5已经支持Two-WayDatabinding了。UI5中的Two-waydatabinding我曾经在我的博客中比较过DataBinding机制：比较数据绑定机制ism：SAPUI5和Angular。现在我将重用为我的博客创建的按钮使用代理模式在UI5中实现更好的图像加载行为以回忆UI5双向数据绑定。我在XML视图中定义了一个简单的按钮：在controller的onInit函数中，text属性绑定到JSON模型中的“field_for_text”字段：onInit:function(){varoModel=newsap.ui.model.json.JSONModel();varmyData={"field_for_text":"Jerrybuttonlabel"};oModel.setData(myData);varbutton=this.getView().byId("jerryButton");button.setModel(oModel);button.bindProperty("文本","/field_for_text");button.oModel=oModel;}双向数据绑定测试：控件属性变化导致模型字段变化在Co中键入以下脚本nsole.在我按下回车键之前，“field_for_text”字段仍然是UI中显示的当前标签“Jerrybuttonlabel”：按下回车键后，模型字段也发生了变化。这个方向的同步逻辑（control->model)已经在我的博客中解释过：HowIdoself-studyonagivenFioricontrol–part7UI5bindingmode.Twowaydatabindingtest:modelfieldchangeleadstocontrolpropertychangeNow让我们做相反的事情。在我更改模型字段并在控制台中按回车键后，没有任何反应。为了使模型字段的更改流向控制属性，有必要调用JSON模型的刷新功能。原因是：当控制属性被绑定时通过我控制器中onInit函数中的这一行来建模字段：utton.bindProperty(“text”,“/field_for_text”);模型更改处理程序被注册为模型更改事件的侦听器，该事件将在调用刷新函数时引发。在此更改处理程序中，控件属性将根据模型字段的更改进行更新。Vue中的双向数据绑定我使用的Vue版本是2.3.4。我只是使用Vue教程中提供的helloworld示例进行检查它的双向数据绑定特征。

{{message}}