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...
在提供的`myMvvm-master`压缩包文件中，很可能是包含了Vue的一个简单实现或示例项目，你可以通过查看源代码进一步学习和理解Vue的双向绑定机制。通常，这样的项目会包含`main.js`入口文件、`App.vue`主组件以及其他...
在实际开发中，理解Vue.js的双向绑定原理不仅有助于更加高效地利用框架提供的功能，还可以帮助开发者在遇到问题时能够迅速定位和解决。通过上述介绍的原理和代码实现，相信开发者可以对Vue.js的双向绑定有了更深层次...
手写简单版的vue双向绑定
数据双向绑定是Vue.js框架的核心特性之一，它使得数据模型（Model）和视图（View）之间的同步变得非常简单且高效。在传统的前端开发中，如果需要保持视图与数据的一致性，往往需要手动编写大量的DOM操作代码，这种...
先声明，该代码是网上一位大佬提供的，但是学习它的代码过程中...该压缩文件内容是vue数据双向绑定的实现与原理解析，提供核心完整代码，并有我的代码注释，浅显易懂，但是需要es6的学习和有一定的javascript基础才行。
vue双向绑定原理
在vue 中想要知道 vue 双向数据绑定原理
在Vue.js 2.0中，模板渲染和双向数据绑定是其...模板渲染和双向数据绑定使得Vue.js能够高效地处理UI和数据的交互，极大地提高了开发效率。对于初学者来说，了解并动手实现这些核心概念有助于深入理解Vue的工作原理。
Vue实现双向绑定的关键在于其数据响应系统，主要包括两个主要部分：`data`对象的代理和`Observer`类以及`Watcher`类。 1. **数据代理**：在Vue实例创建时，Vue会遍历`data`对象的所有属性，并使用`Object....
Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty...
总结，Vue的双向数据绑定是通过MVVM模式、数据劫持、Dep依赖收集、Watcher对象和虚拟DOM等机制协同工作实现的。这种设计使得开发者能够专注于业务逻辑，而不必关心数据与视图间的同步问题，大大提升了开发效率和代码...
在JavaScript的世界里，Vue.js是一个非常流行的前端框架，它的一大特色就是数据双向绑定。这个"原生js实现vue数据双向绑定.zip"文件很显然是为了帮助我们理解Vue.js中数据双向绑定背后的原理，并尝试用纯JavaScript...
通过 Proxy(defineProperty)来实现对数据的监听，通过给数据和方法形成一种绑定
回车时虽然框中不会保留中文，但事实上VUE的双向绑定已经失效了。不管你后面输入什么，绑定的price保存的值只会是中文前的那个值（100）。 这样就导致 表面好像没事，但是当你提交时就数据不对了。 还有一种是、 是...
这个框架充分利用了Vue2的强大功能，如虚拟DOM、响应式数据绑定、组件化以及插件系统，为开发者提供了丰富的UI元素和工具。 Vue2是Vue.js框架的第二个主要版本，其核心特性包括： 1. **虚拟DOM**：Vue2使用虚拟DOM...
vue,双向绑定,代码实现,打开即用,直接浏览器运行查看效果,实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给...
总结，Vue 的双向绑定使得开发者无需手动操作 DOM 来获取或设置表单数据，极大简化了数据绑定和状态管理，提高了开发效率。通过理解并熟练运用 `v-model`，能够更好地构建动态、交互丰富的前端应用。
在Vue中，双向数据绑定是其核心特性之一，它使得视图和模型之间的数据能够实时同步，大大简化了开发者的工作。在这个“模拟vue双向数据绑定示例”中，我们将深入探讨这一机制。 首先，双向数据绑定是Vue.js中的一个...