开发者社区> jerrywangsap> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

SAP UI5和Vue的双向绑定比较

简介:
+关注继续查看

Recently when I do self study on Vue I find many articles in the internet with full of praise on Vue‘s reactive Two-Way Data binding trait. This fact makes me recall my self-study on UI5 early in year 2013 and at that time, the Two-Way Data binding was already supported by UI5.

Two-way data binding in UI5

I have once already compared the Data Binding mechanism in my blog: Compare Data Binding mechanism: SAPUI5 and Angular.

Now I will reuse the button created for my blog Use Proxy pattern to make better image loading behavior in UI5 to recall UI5 two way data binding. I have a simply button defined in XML view:

<core:View xmlns:core="sap.ui.core" xmlns:common="sap.ui.commons" controllerName="buttontutorial.view.simple">
    <common:Button text="Load Image" id="jerryButton"/>
</core:View>

In controller’s onInit function, the text property is bound to field “field_for_text” in JSON model:

onInit: function(){
        var oModel = new sap.ui.model.json.JSONModel();
        var myData = {"field_for_text": "Jerry button label"};

        oModel.setData(myData);
        var button = this.getView().byId("jerryButton");
        button.setModel(oModel);
        button.bindProperty("text", "/field_for_text");
        button.oModel = oModel;
}

Two way data binding test: Control property change leads to model field change

Type the following script in Console.
Before I press entry key, the field “field_for_text” is still the current label “Jerry button label” displayed in UI:

After I press enter key, the model field is changed as well.

The logic for the synchronization in this direction ( control -> model ) has already been explained in my blog: How I do self-study on a given Fiori control – part 7 UI5 binding mode.

Two way data binding test: model field change leads to control property change

Now let’s do the opposite.
After I change model field and press enter key in console, nothing happens.

In order to make the change on model field flows to control property, it is necessary to call refresh function of JSON model.

The reason is: when the control property is bound to model field via this line in onInit function in my controller:
utton.bindProperty(“text”, “/field_for_text”);
A model change handler is registered as listener for model change event, which will be raised when refresh function is called. Inside this change handler, the control property will be updated based on the change of model field.


Two way data binding in Vue

The version of Vue I am using is 2.3.4.
I am just using the hello world example provided in Vue tutorial to inspect its two way data binding trait.

<html>
<script src="lib/vue.js"></script>
<script>
function init() {
jerry = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
});
}
</script>
<body onload = "init();">
<div id="app">
  <p>{{ message }}</p>
</div>
</body>
</html>

Two way data binding test: model field change leads to control property change

Change model field in console via code:
jerry.$data.message = “Jerry change in Console”;

And type enter key, the UI will react accordingly:

The mechanism for this direction of synchronization is, when the Vue application is started, the compiled attribute is registered as a “reactive” field in function defineReactive:

Inside this function the native implementation of Object.defineProperty is utilized to registered a custom setter to the reactive field, which will be called whenever the change happens on that field.

When you change the value of this field in console,
the old value “Hello World” is overwritten by the new value “Jerry change in Console”, and dep.notify will trigger the very control involved in this model change:

In patchVnode function, old DOM node will be replaced with new DOM node created with modified attribute done in console:

In the end the new DOM element’s attribute textContent is filled with new value of reactive field and after that we can immediately see this latest value in UI:

Two way data binding test: Control property change leads to model field change

I made some small changes on the example:

<html>
<script src="lib/vue.js"></script>
<script>
function init() {
jerry = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  }
});
}
</script>
<body onload = "init();">
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message"></input>
</div>
</body>
</html>

Now whenever I type something in input field, the model field message is changed as well. How is this achieved in Vue?

Step1 – Model directive detection

In mount phase the directive v-model is parsed, extracted and stored in the attribute directives of input element:

Step2 – Generate source code of event handler for input field based on extracted directive in previous step

It is this very line of generated code which writes back to the model field with user input:

if($event.target.composing)return;message=$event.target.value
The complete generated source code for directive “v-model=”message” could be found from below code.
A real JavaScript function is created dynamically with this generated source code as function body, which will be used as the concrete event handler for the physical DOM element.

Step3 – Register event handler into physical DOM element

The registration is done using native function addEventListener.

Step4 – Model field will be changed in onInput event handler

Now as long as you type something in input field, the event handler created in step 2 and registered in step 3 will capture this event and react accordingly.
Model field is changed now!

Summary

Fundamentally speaking, per above analysis, both UI5 and Vue uses the Observer pattern to implement the two way data binding. Only the slight difference is that for the notification between control and model, UI5 uses its own Observer code for bi-direction. In Vue, the notification from model to control is implemented on its own as well, whereas the opposite from control to model in the example of this blog is implemented via HTML native event.

本文来自云栖社区合作伙伴“汪子熙”,了解相关信息可以关注微信公众号"汪子熙"。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定。下面是一个最简单的示例 JsFiddle 演示 https://jsfiddle.net/0okxhc6f/ 在这个示例的输入框中输入的内容,会随后呈现出来。
908 0
揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 的方式来实现双向绑定。下面是一个最简单的示例 剖析Vue原理&实现双向绑定MVVM What's your name: Hello {{ name }} new Vue({ el: "#app", data: { name: "" } }); JsFiddle 演示https://jsfiddle.net/0okxhc6f/ 在这个示例的输入框中输入的内容,会随后呈现出来。
645 0
重学Vue【异步组件原理分析】
重学Vue源码,根据黄轶大佬的vue技术揭秘,逐个过一遍,巩固一下vue源码知识点,毕竟嚼碎了才是自己的,所有文章都同步在 公众号(道道里的前端栈) 和 github 上。
0 0
vue可拖拽悬浮按钮组件
vue封装一个可拖拽,贴边吸附的悬浮按钮组件。
0 0
将自己开发的vue组件库发布到npm
将自己编写的组件库发布到npm,后续其他项目可以更加方便地引入。
0 0
Vue封装组件并发布到npm仓库
前言 使用Vue框架进行开发,组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用,甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用,比如iview、element-ui这一类的组件库。但是每个公司的业务场景可能不同,开发人员还是得必须封装自己得组件,如果换了一个项目,那么我们就只能复制组件代码到新的项目里面去了,这样稍显麻烦,其实我们可以将组建上传到npm仓库,要用的时候可以直接从npm安装使用。 总结下来有两点好处: 方面使用,任何项目无缝衔接。 可作为开源项目,积累经验。
0 0
前端-vue基础69-购物车3标题组件和结算组件
前端-vue基础69-购物车3标题组件和结算组件
0 0
Vue 系列讲解---Vue组件
博主传送门: 叶秋学长 博主简介: 全栈领域新星创作者,新星计划第三季人工智能赛道TOP2;阿里云技术博主;退役复学在校大学生,全栈JAVA领域创作者,目光所至,皆为华夏 系列专栏跳转: Vue讲解 Spring系列 Spring Boot 系列 云原生系列(付费专栏) 今天叶秋学长带领大家继续学习vue讲解系列专栏中的Vue组件~~ 一、为什么需要组件? 一个页面逻辑很多,放在一起不利于管理,不利于开发,将一个页面分割成小小的功能块 vue组件化 应用:任何应用都是一颗组件树 1.创建组件 const cpn = Vue.extend({}):创建一个组件构造器 t
0 0
Vue组件库文档站点的搭建思路
本文为Varlet组件库源码主题阅读系列第四篇,读完本篇,可以了解到如何使用`Vite`的`Api`接口来启动服务、如何动态生成多语言的页面路由。
0 0
+关注
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
基于VUE的单页面性能优化实践
立即下载
yqdh_58c128c6555...1510401796.pdf
立即下载