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

This article "Vue2 responsive system asynchronous queue how to achieve" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "Vue2 responsive system asynchronous queue how to achieve" article.

Just imagine if the console.log here is a rendered page, then change the value to refresh the page, which will cause serious performance problems, and the page will keep changing.

Scene import {observe} from ". / reactive"; import Watcher from ". / watcher"; const data = {a: 1, b: 2, c: 3,}; observe (data); const updateComponent = () = > {console.log (data.a + data.b);}; new Watcher (updateComponent); const updateComponent2 = () = > {console.log (data.c);}; new Watcher (updateComponent2); data.a = 2transdata.a = 3dirdata.b = 4transferdata.c = 5

New Watcher (updateComponent) outputs 3 at a time for dependency collection, and new Watcher (updateComponent2) outputs 3 for dependency collection.

Then we change the values of a, a, b, c in turn, and each change will trigger the execution of Watcher, and console.log will be carried out four times in a row.

Just imagine if the console.log here is a rendered page, then change the value to refresh the page, which will cause serious performance problems, and the page will keep changing.

Solution

We can collect all the Watcher through a queue.

When will the Watcher queue be executed?

To wait for all the Watcher to be collected, you can put the execution of the Watcher into the setTimeout. In this way, when the main thread is fully executed, the Watcher queue will be executed.

Code implementation

We can add an id to each Watcher and do not join the queue if there is already an id in the queue.

Let uid = 0 export default class Watcher {constructor (Fn, options) {this.getter = Fn; this.depIds = new Set (); / / have a has function to determine whether a certain id this.deps = []; this.newDeps = []; / / record a new dependency this.newDepIds = new Set () / * add * / this.id = + uid; / / uid for batching / / options if (options) {this.sync =!! options.sync } / * / this.get ();}.}

We also provide an options object in which the sync field is saved, indicating whether the Watcher is triggered immediately or placed in the queue as before.

Then we call the queued function in the update method of Watcher.

Export default class Watcher {... Update () {if (this.sync) {this.run (); / directly run} else {queueWatcher (this); / / join the queue}}.}

Take a look at the implementation of queueWatcher.

Const queue = []; / / Save Watcher queue let has = {}; / / deduplicated Watcherlet waiting = false; / / whether you joined the setTimeout queue export function queueWatcher (watcher) {const id = watcher.id; if (has [id] = = null) {has [id] = true; queue.push (watcher) / / join the queue / / queue the flush if (! waiting) {/ / execute the Watcher function to put in the setTimeout queue, and you can waiting = true; setTimeout (flushSchedulerQueue, 0) only once;}

Take another look at the above implementation of the flushSchedulerQueue function that executes the Watcher queue.

Let flushing = false; / / whether the queue let index = 0 is running * * Flush both queues and run the watchers. * / function flushSchedulerQueue () {flushing = true; let watcher, id; for (index = 0; index)

< queue.length; index++) { watcher = queue[index]; id = watcher.id; has[id] = null; watcher.run(); } resetSchedulerState(); // 执行结束后进行重置}/** * Reset the scheduler's state. */function resetSchedulerState() { index = queue.length = 0; has = {}; waiting = flushing = false;} 总体上就是上边的样子了。 执行结果import { observe } from "./reactive";import Watcher from "./watcher";const data = { a: 1, b: 2, c: 3,};observe(data);const updateComponent = () =>

{console.log (data.a + data.b);}; new Watcher (updateComponent); const updateComponent2 = () = > {console.log (data.c);}; new Watcher (updateComponent2); data.a = 2dirdata.a = 3terdata.b = 4terdata.c = 5

Although we changed the value in data four times later, there are actually only two Watcher, so we will only output twice.

The above is the content of this article on "how to realize the asynchronous queue of Vue2 responsive system". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow 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.