Brief analysis of VUE bidirectional binding

VUE is a lightweight framework of a very hot MVM, which is built with data driver and component. Because it provides a simple and easy-to-understand API, we make it easy.

VUE and MVVM If you have been used to using jQuery to operate DOM, please let go of the manual operation of DOM when you learn Vue.js, because Vue.js is data-driven, you do not need to manually operate DOM. VUE is driven by data, bind its own DOM elements with data, once the binding, DOM, and data remain synchronized.

vue双向绑定简要分析

Where VIEWMODEL is the core of Vue. It is an instance of Vue. It works on an HTML element, which can be a body or a ID. element. Two-way binding mainstream two-way data binding implementation principle

Dirty value detection: This is the way AngularJS implements two-way data binding. The principle is that when the data is changed, the binding relationship of all Model and View is checked, and if there is data, it is changed. If there is a change, it will be processed, and the process will be loop again since it may further lead to changes in other data. Know that there is no change in data. Send data to the view re-rendering. It is conceivable that this method is not high.

Data hijack: Vue uses the Object, defineProperty () method of ES5, using getter / setter to monitor the operation of data, thus notifying the binding is updated. Since it is triggered in different data, the binding view can be accurately updated, not all of the data.


VUE is a bidirectional data binding by data hijacking, the most core method is Object.defineProperty to implement hijacking, detection data of data. Variety.

The implementation of the two-way binding is divided into three steps: vue双向绑定简要分析 1. Implement a data listener, can monitor all attributes of the data object, if there is a change to get the latest valueAnd notify the subscriber.

2. Implement an instruction parser, parsing instructions for each element node. Replace data according to the instruction template, and bind the corresponding update function.

3. Implement an observer that can subscribe and receive a notification of each attribute change, and perform the corresponding callback function of the instruction binding, thereby updating the view.





DEP class is a subscriber Class, which has a subscriber array corresponding to the current attribute. Relationship between current data and all Watcher dependencies. vue双向绑定简要分析 dep.target is a global property that is exposed, and it will be released after the addition of Watcher.
In the SET, if the discovery value is discovered, all subscriber (Watcher) updates the view. vue双向绑定简要分析



If you have a certain understanding for Vue, it is not difficult to achieve this effect.

{{Message}}

vue双向绑定简要分析
VAR App = New Vue ({EL: “#demo”, DATA : {Message: ‘Hello, World!’}})

If you want to say that I can use jQuery, it is true:
 

$ ("# INPUTTEXT"). On ("INPUT", function () {var value = $ (this) .val$ ('. Text'). Text (value)})
This is described: jQuery development project is like a vintage textile machine, Vue + WebPack development is a modern textile factory. The difference is that it is easy, one is a quality leap in production efficiency, multi-member synergy, management.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment