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.
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
相关推荐
通过带着读者手写简化版的vue双向绑定，了解vue双向绑定的核心原理; 从零开始实现vue的双向绑定，让大家可以更好的理解双向绑定的逻辑走向； 本项目依次实现了下面的功能 1、自定义的vue类 2、模板解析 Compile 类 3...
手写简单版的vue双向绑定
主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue双向绑定的原理实现·············································· ·····························
先声明，该代码是网上一位大佬提供的，但是学习它的代码过程中...该压缩文件内容是vue数据双向绑定的实现与原理解析，提供核心完整代码，并有我的代码注释，浅显易懂，但是需要es6的学习和有一定的javascript基础才行。
ppt简单讲解了vue的数据双向绑定以及介绍了组件化
vue双向绑定原理
在vue 中想要知道 vue 双向数据绑定原理
Vue双向绑定详解 目录 1、双向绑定2、那么其它标签选中会不会也有这个结果，答案当然是有：3、我们再来看一个：4、注意 总结 1、双向绑定 2、那么其它标签选中会不会也有这个结果，答案当然是有： 3、我们再...
vue 双向数据绑定原理。
原生js实现vue数据双向绑定
通过 Proxy(defineProperty)来实现对数据的监听，通过给数据和方法形成一种绑定
本篇文章主要介绍了详解Vue双向数据绑定原理解析 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue,双向绑定,代码实现,打开即用,直接浏览器运行查看效果,实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给...
模拟VUE2.0的模板渲染+双向数据绑定
1.首先我们先了解下实现Vue双向绑定的核心方法Object.defineProperty(obj, prop, descriptor) obj: 目标对象； prop: 目标对象属性的名称； descriptor: 目标对象属性的描述符； 该方法的详细解释请移步这里。 2....
模拟vue双向数据绑定示例
主要介绍了Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
web前端面试题汇总-精美桌面-vue双向绑定原理，把面试题设置成桌面，每天打开电脑就学习一遍，加强记忆。会不断更新，不断上传！