View The changes in real time make Model change , and Model The changes can also be updated in real time to View.
Vue Using data hijacking & Release - The way subscription mode , adopt ES5 Provided Object.defineProperty() Method hijacking （ monitor ） Each attribute of getter、setter, And notify all subscribers when the data changes （ Component objects that use this property ）, Trigger corresponding listening callback . To achieve Vuex Two way data binding in , It can be roughly divided into three modules ：Observer、Compiler、Watcher, Pictured ：
Template parsing Watcher Will correspond to the binding instruction （ one-on-one ）, This is done by calling the subscriber Watcher initialization （Watcher Medium get()） To trigger the corresponding attribute in the publisher Observer in （Object.defineProperty） Of getter,Observer Will judge whether it is through Watcher Initialize the called , If it is, it will pass Dep Class for dependency collection . Also called for the first time Watcher.update() To initialize the view . After that, every data update will pass Observer Medium setter To trigger through Dep Class collection of dependencies update Callback , Update the status in the subscriber and update the view .
Observer When dealing with objects and arrays , If it's an array , And the method called will change the length of the array , The index will be increased again and the array will be updated , Re monitoring （ Because calling array native api It will trigger many times getter、setter And the index doesn't change ）. If it's an object, it's through the getter Get the value and setter Update value .
Vue It's based on two-way binding relying on mobile phones ;
3.0 Previous versions were used Object.defineProperty,3.0 The new version uses Proxy.