SAPUI5与Vue双向绑定对比

时间：2023-04-01 10:46:34 vue.js

最近在自学Vue的时候发现网上很多文章都对Vue的响应式双向数据绑定特性赞不绝口。这让我想起了2013年初的时候自学UI5，那时候UI5已经支持Two-WayDatabinding了。UI5中的Two-waydatabinding我曾经在我的博客中比较过DataBinding机制：比较数据绑定机制：SAPUI5和Angular。现在我将重用为我的博客创建的按钮使用代理模式在UI5中实现更好的图像加载行为以回忆UI5双向数据绑定。我在XML视图中定义了一个简单的按钮：在controller的onInit函数中，text属性绑定到JSON模型中的“field_for_text”字段：onInit:function(){varoModel=newsap.用户界面。模型.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;}双向数据绑定测试：控件属性改变导致模型字段改变在控制台中键入以下脚本。在我按下回车键之前，字段“field_for_text”仍然是当前显示的标签“Jerrybuttonlabel”UI：在我按下回车键后，模型字段也发生了变化。这个方向的同步逻辑（控制->模型）已经在我的博客中解释过：HowIdoself-studyonagivenFioricontrol–第7部分UI5绑定模式。双向数据绑定测试：模型字段更改导致控件属性更改现在让我们做相反的事情。在我更改模型字段并在控制台中按回车键后，没有任何反应。为了使模型字段上的更改流向控制属性，有必要调用JSON模型的刷新函数。原因是：当控制属性通过我控制器中onInit函数中的这一行绑定到模型字段时：utton.bindProperty(“text","/field_for_text");模型更改处理程序被注册为模型更改事件的侦听器，该事件将在调用刷新函数时引发。在此更改处理程序中，控件属性将根据模型字段的更改进行更新。Vue中的双向数据绑定我使用的Vue版本是2.3.4。我只是使用Vue教程中提供的helloworld示例进行检查它的双向数据绑定特征。

双向数据绑定测试：模型字段更改导致控制属性更改通过代码更改控制台中的模型字段：jerry.$data.message=“JerrychangeinConsole”;并键入回车键，UI将做出相应反应：这种同步方向的机制是，当Vue应用程序启动时，已编译的属性在函数defineReactive中注册为“反应式”字段：在此函数中，Object.defineProperty的本机实现用于将自定义设置器注册到反应字段，每当该字段发生更改时都会调用它。当您在控制台中更改此字段的值时，旧值“HelloWorld”将被新值“JerrychangeinConsole”覆盖，并且dep.notify将触发此模型更改中涉及的非常控制：在patchVnode函数中，旧DOM节点将被替换为使用在控制台中完成的修改属性创建的新DOM节点：最后，新DOM元素的属性textContent填充了反应字段的新值，之后我们可以立即在UI中看到这个最新值：双向数据绑定测试：控件属性更改导致模型字段更改我对示例进行了一些小更改：

现在每当我在输入字段中键入内容时，模型字段消息也会更改。这在Vue中是如何实现的？Step1–模型指令检测在挂载阶段，指令v-model被解析，提取并存储在输入元素的属性指令中：Step2–根据提取的指令生成输入字段的事件处理程序源代码在上一步中，正是这一行生成的代码用用户输入写回模型字段：if($event.target.composing)return;message=$event.target.value指令“v-model”的完整生成源代码=”message”可以从下面的代码中找到。一个真正的JavaScript函数是用这个生成的源代码作为函数体动态创建的，它将用作物理DOM元素的具体事件处理程序。第3步–将事件处理程序注册到物理DOM元素注册是使用本机函数addEventListener完成的。第4步–模型字段将在onInput事件处理程序中更改现在只要您在输入字段中键入内容，在第2步中创建并在第3步中注册的事件处理程序将捕获此事件并做出相应的反应。模型字段现在改变了！总结从根本上说，根据上面的分析，UI5和Vue都使用观察者模式来实现双向数据绑定。只有轻微的不同的是，对于控件和模型之间的通知，UI5使用了自己的双向Observer代码。在Vue中，模型到控件的通知也是自己实现的，而本博客例子中的控件到模型的通知是通过HTML原生事件实现的。要获取更多Jerry的原创文章，请关注公众号“汪子熙”：