Introduction (Concept)

One of the most obvious features of Vue is its responsive system, whose data model is plain JavaScript objects. And when you read or write to them, the view responds. The article briefly describes its implementation principle, if there are mistakes, please do not hesitate to correct. Personal blog address: hiybm.cn

Responsive data
<div id = "exp">{{ message }}</div>

const vm = new Vue({
	el: '#exp',
	data: {
		message: 'This is A'
	}
})
vm.message = 'This is B'// Reactive vm._message ='This is C'// non-responsiveCopy the code

In the above code, data is the data Object of the Vue instance. When the instance is initialized, Vue iterates through all the properties in the data and converts them all into getters/setters using Object.definePropery. So that the properties of data can respond to data changes. Additionally, Object.defineProperty is an ES5 non-shim (shim) feature, which is why Vue does not support IE8 and earlier browsers. Objects must be pure objects (with zero or more key/value pairs) : native objects created by browser apis. Therefore, message declared in data is reactive data, and _message is not reactive because it is added by using Vue instances outside of data.

About the Object. DefinePropery

The object.defineProperty () method directly defines a new property on an Object, or modifies an existing property of an Object, and returns the Object. This API is the key to implementing responsive data.

Syntax: Object.defineProperty(obj, prop, descriptor)

  • Obj: Object for which attributes are to be defined
  • Prop: The name of the property to define or modify
  • Descriptor: Attribute descriptor to be defined or modified.

Tips: Be aware that ECMAScript has two types of properties: data properties and accessor properties. The descriptor here can take on data attributes and accessor attributes. Data property: A position containing a data value from which read and write operations can be performed and has the following properties:

  • [[Configurable]]: Configurable switch for properties, such as delete, modify. The default value istrue.
  • [[Enumberble]]: Enumerable (Yesfor-in). The default value istrue.
  • [[Writable]]: Indicates whether the value of an attribute can be modified. The default value istrue.
  • [[value]]: contains this attributeThe data values, read from this position, and write to store the new value to this position. The default value isundefined.

Accessor properties: Contains no data values and a function pair (getter/setter). Features are as follows:

  • [[Configurable]]: Configurable switch for properties, such as delete, modify. The default value istrue.
  • [[Enumberble]]: Enumerable (Yesfor-in). The default value istrue.
  • [[Get]]: The function called when reading the property. The default value isundefined.
  • [[Set]]: The function that is called when an attribute is written. The default value isundefined.

Tips: When the accessor property is read, the getter function is called, which is responsible for returning a valid value; When an accessor property is written, a setter function is called and a new value is passed in. The function is responsible for determining how to process the data, but the two functions do not have to exist together. Vue is a response system that utilizes the getter/setter feature. Sample code:

// Define a book object, _year and edition are data attributes. var book = { _year : 2004, edition : 1 }; // Create the year accessor property for the book object. Object.defineProperty(book,"year",{// When reading the year accessor property, the get() method returns the value of _year. get :function () {
        console.info(this._year, 'get'); / / 2004returnthis._year; }, // when writing the year accessor property,setThe () method operates on the new value.set : function (newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            console.info(this._year, 'set') // 2005 this.edition += newValue - 2004; }}}); // The year accessor property returns the value of _year. book.year; // called when the year accessor property is writtenset() function to operate. book.year = 2005; Console. info(book.edition) // 2 console.info(book) // There are eggs hidden here.Copy the code
watcher

It’s official: Every component instance has a corresponding Watcher instance object, which records properties as dependencies during component rendering and then, when setters for dependencies are called, tells Watcher to recalculate, thereby updating its associated components.

As shown below:

Tips
watcher
watcher

END

There are some deep details that are not covered in this article, and I will continue the series to delve deeper into the underlying responsive principle of VUE, SYNT.

Refer to the link

Object.defineproperty

Deep into the responsivity principle

Simple vUE responsive principle

Javascript Advanced Programming (version 3) Section 6.1