This article and everyone to share is mainly vue.js response to the principle of related content, a look at it, hope to learn from you vue.js helpful.about Vue.jsThe Vue.js is an MVVM framework that is quick and easy to use, and responds by updating the view while modifying the data. The vue.js response principle relies onObject.defineproperty, especially in the vue.js documentation, which is why vue.js does not support E8 and the lower version of the browser. Vue listens to changes in data by setting the Setter/getter method of the object's properties, relies on getter for collection, and each setter method is an observer that notifies the subscriber to update the view when the data changes.data into observable (observable)So how does vue make all the properties under All data observable (observable)?functionObserver(value) {Object.keys (value). ForEach ((key) = Definereactive (value, key, Value[key], CB)}functiondefinereactive(obj, Key, Val, CB) {Object.defineproperty (obj, key, {enumerable:true,configurable:true,get: () =>{/* .... Dependency collection et ....*/},set:newval=> {CB ();/* Subscriber receives message callback */}})}classVue{Constructor(options) { This. _data = Options.data;observer ( This. _data, Options.render)}} LetApp =NewVue ({el: ' #app ', data: {text: ' text ', Text2: ' Text2 '},render () {Console.log ("Render");}}) For ease of understanding, first consider one of the simplest cases, regardless of the array, as shown in the code above. InInitDatais called in theObserveThis function sets the data for Vue to observable. When the _data data changes, the set is triggered, and the Subscriber is invoked (in this case, render). So the problem is that it requires a app._date.text operation to trigger the set. In order to be lazy, we need a convenient way to trigger the set view to redraw by App.text directly. Then you need to use a proxy.AgentWe can execute a proxy for data in Vue's constructor constructorProxy。 This allows us to delegate the properties on the data above to the VM instance. _proxy (Options.data);/* *//* Proxy in constructor */function_proxy(data) {Constthat = This; Object.keys (data). ForEach (key = {Object.defineproperty (that), key, {configurable:true,enumerable:true,get:functionProxygetter() {returnThat._data[key];},set:function Proxysetter(Val) {That._data[key] = val;}})}); We can use App.text instead of App._data.text. js Source: Rare earth Nuggets
Vue.js Response principle
