Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how to achieve Vue responsive related knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

Simple version

Take watch as the starting point

Watch is a highly used feature in development. Its purpose is to observe a piece of data and perform a pre-defined callback when the data changes. The mode of use is as follows:

{watch: {obj (val, oldVal) {console.log (val, oldVal);}

The obj property of the Vue instance is observed above, and when its value changes, the new and old values are printed.

Therefore, we define a watch function:

Function watch (data, key, cb) {/ / do something}

The watch function receives three attributes, which are

Data: observed object key: observed attribute

Cb: callback to be performed after data changes

Object.defineProperty

Since you want to perform a callback after the data has changed, you need to know when the data was modified, and that's what Object.defineProperty does, which defines accessor properties for the data. Get is triggered when the data is read and set is triggered when the data is modified.

We define a defineReactive function that turns a data into a responsive one:

Function defineReactive (data, key) {let val = data [key]; Object.defineProperty (data, key, {configurable: true, enumerable: true, get: function () {return val;}, set: function (newVal) {if (newVal = = val) {return;} val = newVal;}});}

The defineReactive function defines get for the key property of the data object, and set,get returns the value of the property key. The value of the modified key in val,set is the new value newVal. So far, there is nothing special about the key attribute.

When the data is modified, the set is triggered, and the cb must be executed in the set. But there seems to be no connection between set and cb, so let's build a bridge to build the connection between the two:

Let target = null

We define a target variable globally, which is used to hold the value of cb, and then called in set. So, when will cb be saved in target? Back to the starting point, we will call the watch function to observe the key property of data, and execute the callback cb we defined when the value is modified. This is the time when the cb is saved in the target:

Function watch (data, key, cb) {target = cb;}

The target in the watch function has been modified, but what if I want to call the watch function again, that is, I want to perform two different callbacks when the data is modified, or I want to observe other properties of the data? You have to save the value of the target somewhere else before it is modified again. Because target is common to different callbacks of the same property or callbacks of different properties.

It is necessary to set up a private repository for the key property to hold the callback. In fact, there is something special about the defineReactive function: a val variable is defined inside the function, and then the val variable is used in both the get and set functions, which forms a closure. The scope of the defineReactive function is private to the key attribute, which is a natural private repository:

Function defineReactive (data, key) {let val = data [key]; const dep = []; Object.defineProperty (data, key, {configurable: true, enumerable: true, get: function () {target & dep.push (target); return val;}, set: function (newVal) {if (newVal = val) {return;} dep.forEach (fn = > fn (newVal, val)); val = newVal;}});}

We define an array dep in the defineReactive function, which holds the callback set, also known as the dependency set, of each property key. Collect dependencies into dep in the get function, and loop through dep to execute each dependency in the set function. To sum up: collect dependencies in get and trigger dependencies in set.

Since you are collecting dependencies in get, you need to find a way to trigger get when tatget is modified, so let's read the value of the property key in the watch function:

Function watch (data, key, cb) {target = cb; data [key]; target = null;}

Next let's test the code:

Complete ok!

Dependence

Recall that in the simple version, we mentioned a total of three roles: defineReactive, dep, and watch, each of which actually has its own functions, but we have coupled the three codes together, so it is not convenient for us to expand and understand them, so let's categorize them.

Watcher

The observer, also known as dependency, is responsible for subscribing to a data and what to do when the data changes:

Class Watcher {constructor (data, key, cb) {this.vm = data; this.key = key; this.cb = cb; this.value = this.get ();} get () {Dep.target = this; const value = this.vm [this.key]; Dep.target = null; return value;} update () {const oldValue = this.value; this.value = this.vm [this.key] This.cb.call (this.vm, this.value, oldVal);}}

The value of the attribute key is first read in the constructor, which triggers the set of the attribute key, and then stores itself as a dependency in its dep array. Of course, you need to assign yourself to the bridge Dep.target before reading the property value, which is what the get method does. Finally, there is the update method, which needs to be executed when the subscription data changes, and its main purpose is to execute the cb, because the cd needs the changed new value as a parameter, so read the attribute value again.

Dep

The responsibility of Dep is to build the relationship between the attribute key and the dependency Watcher, and its instance must have a unique dependency collection box that belongs to the attribute key:

Class Dep {constructor () {this.subs = [];} addSub (sub) {this.subs.push (sub);} depend () {Dep.taget & & this.addSub (Dep.target);} notify () {for (let sub of subs) {sub.update ();}

Subs depends on the collection box, and when the attribute value is read, the dependency is included in the depend method; when the attribute value is modified, the dependency collection box is traversed in the notify method, and each dependent update method is executed.

Observer

The defineReactive function does only one thing, converting the data into responsive, and we define an Observer class to aggregate its functionality:

Class Observer {constructor (data, key) {this.value = data; defineReactive (data, key);}} function defineReactive (data, key) {let val = data [key]; const dep = new Dep (); Object.defineProperty (data, key, {configurable: true, enumerable: true, get: function () {dep.depend (); return val;}, set: function (newVal) {if (newVal = = val) {return } dep.notify (); val = newVal;});}

Dep is no longer a pure array, but an instance of the Dep class. The logic of dependency collection in get function and dependency trigger in set function are replaced by dep.depend and dep.update respectively, which makes the logic of defineReactive function clearer. But the Observer class just calls the defineReactive function in the constructor, so it doesn't help? Of course, this is to pave the way for the back!

Test the code:

Observe all attributes

So far we have only focused on one attribute, and an object may have more than n attributes, so we need to make some adjustments.

Observe all the properties of an object

The main purpose of observing a property is to define its accessor properties, and for our code, it is to execute the defineReactive function, so make the following changes to the Observer class:

Class Observer {constructor (data) {this.value = data; if (isPlainObject (data)) {this.walk (data);}} walk (value) {const keys = Object.keys (value); for (let key of keys) {defineReactive (value, key);}} function isPlainObject (obj) {return ({}) .toString.call (obj) = ='[object Object]';}

We define a walk method in the Observer class that iterates through all the properties of the object and then calls it in the constructor. The premise of the call is that the object is a pure object, that is, the object is initialized by literal or new Object (), because things like Array, Function, and so on are also objects.

Test the code:

Depth observation

As long as the object can be nested, that is, a property value of an object can also be an object, our code can't do that yet. In fact, it is also very simple, just do a recursive traversal:

Class Observer {constructor (data) {this.value = data; if (isPlainObject (data)) {this.walk (data);}} walk (value) {const keys = Object.keys (value); for (let key of keys) {const val = value [key]; if (isPlainObject (val)) {this.walk (val);} else {defineReactive (value, key);}

We determined in the walk method that if the property value of key val is a pure object, then call the walk method to traverse its property value. Since it is a deep observation, the use of key in the watcher class has also changed, for example: 'a.b.cpermission, then we need to be compatible with this nested key:

Class Watcher {constructor (data, path, cb) {this.vm = data; this.cb = cb; this.getter = parsePath (path); this.value = this.get ();} get () {Dep.target = this; const value = this.getter.call (this.vm); Dep.target = null; return value;} update () {const oldValue = this.value; this.value = this.getter.call (this.vm, this.vm) This.cb.call (this.vm, this.value, oldValue);}} function parsePath (path) {if (/. $_ / .test (path)) {return;} const segments = path.split ('.'); return function (obj) {for (let segment of segments) {obj = obj [segment]} return obj;}}

The getter attribute is added to the instance of the Watcher class, whose value is the return value of the parsePath function. In the parsePath function, the anonymous function returns an anonymous function, which receives a parameter obj and finally returns obj as the return value, so the focus here is what the anonymous function does to obj.

There is only one for...of iteration in the anonymous function, and the iterative object is segments,segments through the path pair'.' A segmented array, for example, if path is' a.b.cblocks, then segments is ['a', 'baked,' c']. There is only one statement in the iteration, and obj is assigned to the attribute value of obj, which is equivalent to reading layer by layer. For example, the initial value of obj is:

Obj = {a: {b: {c: 1}

Then the final result is:

Obj = 1

The purpose of reading attribute values is to collect dependencies, for example, if we want to observe obj.a.b.c, then the goal is achieved. Now that you know that getter is a function, you can get the value by executing getter in the get method.

Test the code:

Here's a detail. Let's look at the get method of the Watcher class:

Get () {Dep.target = this; const value = this.getter.call (this.vm); Dep.target = null; return value;}

When executing the this.getter function, the value of Dep.target is always the current dependency, while the this.getter function reads the attribute value layer by layer, and all the attributes in this path actually collect the current dependency. For example, in the above example, if the dependency of the attribute 'a.b.c' is collected into the dep of obj.a, obj.a.b, or obj.a.b.c, then modifying obj.an or obj.b will trigger the current dependency:

Avoid repeated collection dependencies

Observation expression

In Vue, the first argument to the $watch method can be passed as a function:

This.$watch (() = > {return this.a + this.b;}, (val, oldVal) = > {console.log (val, oldVal);})

This kind of writing is equivalent to observing an expression, similar to computed in Vue, the dependency will be collected into the dep of attribute an and attribute b, no matter which one is modified, the dependency will be triggered whenever the value of the expression changes.

To be compatible with the incoming function, let's modify the Watcher class slightly:

Class Watcher {constructor (data, pathOrFn, cb) {this.vm = data; this.cb = cb; this.getter = typeof pathOrFn = = 'function'? PathOrFn: parsePath (pathOrFn); this.value = this.get ();}. Update () {const oldValue = this.value; this.value = this.get (); this.cb.call (this.vm, this.value, oldValue);}}

For the second parameter pathOrFn, we first determine whether it is already a function, and if so, assign a value directly to this.getter, otherwise we call the parsePath function to parse. In the update method, the get method is called again to get the modified value.

Test the code:

It doesn't seem to be right? Output 1949 times! And it's on the rise. Someone must be stuck in an infinite loop. Looking back at our modified point, in the update method, we call the get method again, which triggers another collection of dependencies. Then we iterate through the dependency collection in the notify method of the Dep class, and each time the dependency is triggered, it causes the dependency to be collected again, which is an infinite loop!

If you find a problem, come and solve it. We need to check the uniqueness of the dependency:

Let uid = 1 + class Watcher {constructor (data, pathOrFn) {this.id = uid++;...}} class Dep () {construct () {this.subs = []; this.subIds = new Set ();}. AddSub (sub) {const id = sub.id; if (! this.subIds.has (id)) {this.subs.push (sub); this.subIds.add (id);}}.}

Since we are going to do a uniqueness check, we have added a unique id to the Watcher class instance. In the Dep class, we add the attribute subIds to the constructor, whose initial value is empty Set, which serves to store dependent id. Then in the addSub method, determine whether the dependent id already exists before adding the dependency to the subs.

Test the code:

Output only once, full ok.

The significance in Vue

To prevent repeated collection of dependencies, in addition to preventing the above mentioned from falling into an infinite loop, there is more important significance in Vue, such as the following templates:

{{a}}

{{a}}

{{a}}

In Vue, in addition to the dependency on the watch option, there is a special dependency called the render function dependency, which is used to update the VNode and regenerate the DOM when the variables in the template change. In the template we defined above, variable an is used for a total of 3 times. when variable an is modified, if there is no collection to prevent repeated dependencies, the rendering function will be executed 3 times! This is absolutely necessary! And 3 times is just an example, in fact there may be more!

These are all the contents of the article "how to achieve the responsiveness of Vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.