Data responsivity principle

Use Object.defindProperty () for data hijacking depth listening to realize the principle of responsivity implementation process, declare a common

Let obj = {name: ‘small inscription, age: 20, b: {index: 10, c: {n: 20}}, ary:,22,33,44 [11]}

Const oldAryproto = array. prototype // Define an object object prototype using an Array prototype const newAryproto = Object. Create (oldAryproto) // Can get the result newaryProto.__proto__ === array. prototype Returns true defines a base Array of the contents of the Array using the Array prototype method name let AryList = ['push','pop','shift','unshift','sort','splice','reverse'] loop this array to add key and value to our object. Key is the name of our array method (e.g. Push, Function (){push:fn(){}, pop:fn(){}, shift:fn(){},} call the corresponding function in each function to operate on the array... OldAryproto [Element]. Call (this, arguments... Arguments) can be written as: Arylist.foreach (element => {newAryproto[element] = function(){array.prototype Console. log(' the method on the object is triggered to listen for updates to the view, but you can't modify the array, OldAryproto [Element]. Call (this,...) oldAryproto[element]. arguments) } }); Function obServer(target) {Function obServer(target) {if target is not object or null, return target for further processing if (typeof target ! = = 'object' | | target = = = null) {return target} / / if it is an array type the following: Modify the prototype of the array to point to the object we defined. The object we defined registers the corresponding operation methods of the array (push,pop,shift, etc.) but these methods are ordinary functions. When this function is called, it does not modify the array directly. His __proto__ is pointing to our array. prototype so just call our method above newAryproto and then synchronously trigger the method on the prototype to modify the Array, If (array.isarray (target)){if(array.isarray (target), __proto__ = newAryproto} if the object type is target {status: {name:'xiaoming'}} set () {status.name = 'xiaoming'; {name: For (let key in target) {this.defindreactive (target, key, Target [key])}} function defindReactive(target, key, val) {// obServer DefineProperty (target, key, {get: Function () {console.log(' get value ', val) return val; }, set: Function (newValue) {// When we change the value of an attribute directly to a chestnut: Obj. A = {number:10} and immediately obj. A. umber++ where the value is directly changed to an object and if you don't do obServer recursion its multiple changes will only be listened for once and the view update will only be output once obServer(newValue) if (val ! == newValue) {console.log(' view update ') val = newValue}}})} obServer Obj ('50'); obj ('50'); obJ.ary ('50'); Console. log(obj.ary,'------') // Changes to object properties are listened for by set. Obj.name = 'little red' // Deep changes are also listened for by the recursive obServer method above. Obj.b.c. n = 80 // We use the obServer method to check for the new value before the assignment. If the assignment continues, the set will listen for every update even after the assignment. Obj. b = {number:50} obj.number++Copy the code