Talking about the functions of vue to implement data listening: Object. defineProperty and vuedefineproperty

Talking about the functions of vue to implement data listening: Object. defineProperty and vuedefineproperty

Many new APIs are added in ES5, such as Object. xxx-related methods, including an Object that defines properties. defineProperty (and Object. defineProperties) This method is the core method for the vue framework to implement data listening. Its definition is as follows:

Object. defineProperty ([Object] obj, [String] propname, [Object] desp)

1. @ Param obj: an object for which the attribute is to be configured
2. @ Param propname: The property name to be configured. It is a string.
3. @ Param desp: Description of the attribute. It is an object,

Items that can be configured in desp

<1> writable: true/false

<2> whether retriable: true/false can be configured, for example, deleting this attribute

<3> enumerable: true/false indicates whether the for in loop traversal attribute can be used.

<4> value: value, attribute value

When writing a vue project, we will add our own attributes to the data attribute. This attribute is responsive in the vue, that is, it can listen to data changes, make corresponding changes (such as DOM operations)

We can use defineProperty to generate setter and getter for attributes (that is, accessors in other programming languages) to monitor data changes.

Next we will implement a small demo of data monitoring.

The following data is available:

  let vue = {   data: {    title: 'life style',    content: 'bike walk sleep...'   }  };

The data attributes and their internal attributes that have been declared in advance are monitored for changes in the title and content in data.

How can this problem be achieved? The number of attributes is unknown, so we can use the for in loop to traverse all the attributes of the data object.

// How can I monitor attributes changes in user-defined data? Let data = vue. data; for (let prop in data) {data ['_' + prop] = data [prop]; // stores private attribute objects. defineProperty (data, prop, {enumerable: true, set: function (newVal) {console. log ('you are modifying '+ prop + '!... Operate DOM... '); // data verification this [' _ '+ prop] = newVal;}, get: function () {console. log ('getter get value... '); return this [' _ '+ prop] ;}});}

Call defineProperty when traversing the data property to add the set and get methods to the property of the data object,

We add a new property _ xxx to data to save our previous values so that we can get the original values in the get method.

The set method is used to listen for this attribute to be re-assigned,

The get method is used to obtain the value in the desired format.

Note that do not use this assignment or value in set and get. this will cause loop calls and problems !!!

In addition, we should not use var, but let. Because var is not a block scope, the last prop you access will always be the last one.

After definition, we can modify the title and content attributes in data,

When we assign a value to the title, set is automatically called back to obtain the value and get is automatically called.

Test code

// The Value assignment operation calls the set Method of this attribute, similar to set ('aaa') data. title = 'aaa'; // The get value operation calls the get method console of this attribute. log (data. title); data. content = 123; // This dynamic attribute method also triggers set/get data ['title'] = 123; console. log (data ['title']);

Result (it is recommended to operate in chrome of the latest version ):

There are still some problems and descriptions about the Traversal method:

1. an attribute of the data attribute may still be an object, that is, the problem of multi-layer Object Listening

In this case, you can use recursive functions to traverse data attributes and perform the same operation.

2. The set method is actually called through data. title = 1, which is similar to the point syntax in OC.

3. To define multiple attributes at the same time, you can use

Object.defineProperties([Object] obj, [Object] props);

It should be noted that this article only describes the basic usage of defineProperty, not the implementation of vue code.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.