Methodology for small procedures using Watch monitor data change

As is well known, VUE can be used to observe and respond to the data changes on the Vue instance, then the applet can be achieved?

The principle of the listener is to write data that needs to be listened in the DATA in the Watch object, and provides a method to call the method when the value of the listened data is changed.

We need to use the Object.defineProperty () method in JavaScript, to manually hijack the getter / setter of the object, so that the object is implemented (call setter), perform a corresponding function in the Watch object. To achieve the monitoring effect.

Object.defineProperty () method, will define a new attribute directly on an object, or modify the existing properties of an object, and return to this object.

Here, there are multiple pages that need to be listened to the needs, write the monitoring method in app.js so that global call

ONLAUNCH: function () { }, // Setting the listener Watch: function (ctx, obj) {Object.keys (obj) .foreach (key => {this.observer (ctx.data, key, ctx.data [key], function (value) {OBJ [Key] .Call (CTX, Value)}}}}}}}}, // Listening Properties, and performs listening functions OBServer: Function (Data, Key, Val, Fn) {Object.defineProperty (data, key, {configurable : True, Enumerable: True, Get: Function () {Return Val}, SET:Function (newval) {if (newval === val) Return Fn &&f (newval) Val = newval}}
   
, then the page that needs to be listened ONLOAD, calling the Watch method (where Test is the data to be listened. When Test assigns the value in other methods, Watch can monitor Test changes)

const App = getApp () Page ({data: {test: 0}, online: function () {// call listener, listening data change app.watch (this, {test: function (newval) {Console .log (newval)}}}
  The above is all the contents of this article, I hope to help everyone, I hope everyone can support Tumi Cloud.  
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment