About reactive principles in Vue (detailed tutorial)

One of the most significant features of Vue is the response system - the model is just an ordinary object, and modifying it updates the view. The following article mainly gives you an in-depth explanation of the responsiveness principle of Vue, as well as some precautions for Vue responsiveness. Friends who need it can follow the editor to learn together.

Preface

One of the most obvious features of Vue is its responsive system, and its data model is an ordinary JavaScript object. And when you read or write them, the view responds. The article briefly explains its implementation principle. If there are any errors, please feel free to correct them. Not much to say below, come and learn with the editor.

Responsive data

{{ message }}
 const vm = new Vue({ el: '#exp', data: { message: 'This is A' } }) vm.message = 'This is B' // 响应式 vm._message = 'This is C' // 非响应式

In the above code, data is the data object of the Vue instance. When the instance is initialized, Vue will traverse the data All properties, and use Object.definePropery to convert all these properties into getters/setters, so that the data properties can respond to data changes. In addition, Object.defineProperty is a feature in ES5 that cannot be shimmed, which is why Vue does not support IE8 and lower browsers. The object must be a pure object (containing zero or more key/value pairs): a native object created by the browser API. Therefore, the message declared in data is reactive data, and since _message is data added using a Vue instance outside of data, it is not reactive.

About Object.definePropery

Object.defineProperty()The method will directly define a new property on an object , or modify an existing property of an object and return the object. This API is the key to implementing reactive data.

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

• ##obj: Object to define properties

• prop: The name of the property to be defined or modified

• descriptor: The property descriptor to be defined or modified.

• [[Configurable]]: For attributes Operate configurability switches, such as deletion and modification. The default value is true.

• [[Enumberble]]: Whether it is enumerable (via for-in). The default value is true.

• [[Writable]]: Whether the value of the attribute can be modified. The default value is true.

• [[value]]: Contains the data value of this attribute. Read from this location when reading, and store the new value to this location when writing. The default value is undefined.

• [[Configurable]]: Configurable switch for attribute operations, such as deletion and modification. The default value is true.

• [[Enumberble]]: Whether it is enumerable (via for-in). The default value is true.

• [[Get]]: Function called when reading properties. The default value is undefined.

• [[Set]]: Function called when writing attributes. The default value is undefined.

Tips:When reading the accessor property, the getter function will be called, which is responsible for returning a valid value; when writing When an accessor property is entered, the setter function

Sample code:

// 定义一个book对象，_year和edition都属于数据属性。 var book = { _year : 2004, edition : 1 }; // 对book对象创建 year 访问器属性。 Object.defineProperty(book, "year",{ // 读取 year 访问器属性时，get() 方法返回 _year 的值。 get : function () { console.info(this._year, 'get'); // 2004 return this._year; }, // 写入 year 访问器属性时，set() 方法对新值进行操作。 set : function (newValue) { if (newValue > 2004) { this._year = newValue; console.info(this._year, 'set') // 2005 this.edition += newValue - 2004; } } }); // 读取 year 访问器属性时会返回_year的值。 book.year; // 写入 year 访问器属性时会调用set() 函数，进行操作。 book.year = 2005; console.info(book.edition) // 2 console.info(book) // 此处藏有彩蛋。

watcher

Tips:Each instruction/data binding in the template has a corresponding watcher object . The role played by watcher is equivalent to a link, and the function of this link is to rely on collection.

Change Detection## 1·(Object.observe obsolete), Vue cannot detect the addition or deletion of object attributes, so the attributes must be in data object, but you can use

to add response attributes to the object (vm.$setinstance methodVue.setGlobal method).

2. Use the (Object.assign()or_.extend()) method to add attributes, which will not trigger updates. In this case, it is recommended to useoldobject= Object.assign({},oldobject,{key1:value1,key2:value2})