How to use defineProperty to realize two-way data binding in vue.js
This article mainly introduces the relevant knowledge of "how vue.js uses defineProperty to achieve two-way data binding". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how vue.js uses defineProperty to achieve two-way data binding" can help you solve the problem.
How does vue.js achieve two-way data binding?
Different from angular.
Vue takes advantage of the defineproperty feature of es5.
1. A small example
When var obj= {}; var bind= []; / / triggers the obj object set and get methods, take the opportunity to output or modify the contents of the bind array Object.defineProperty (obj,'s', {set:function (val) {bind ['s'] = val;}, get:function () {return bind ['s'];}}) var demo=document.querySelector ('# demo'); var display=document.querySelector ('# display') / / the value of demo is bound to bind ['s'], and the innerHTML of # display is also bound to bind ['s']. Demo.onkeyup=function () {obj ['s'] = demo.value;// triggers the set method of obj, which is equal to the value of # demo assigned to bind ['s']. Display [XSS _ clean] = bind ['s'];}
Achieve results:
two。 Compatibility
It seems that the syntax of es5 is not compatible with browsers below IE9. So vue can only be compatible with browsers above ie9.
You can use es5's compatibility library: es5-shim.
This is the end of the introduction to "how vue.js uses defineProperty to achieve two-way data binding". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
