Vue3 Source Code Interpretation Time Slicing Usage

Today, I brought to a source of source code. Emm is about Vue3. After the Vue3 source code is released, there have been many articles to analyze its source code. I think soon, I have to be bad, haha ​​

The part I want to resolve today is the Time Slicing section that has been abolished. This part of the source code has appeared in the video of Vue Conf 2018, but the source code has been removed, and there may be no people Pay attention, so it should not be rotten to the street

before reading the source code, you need to pack it first, package a clean and debugged The file is very important

ROLLUP used by Vue3 for packaging, we need to transform it


Import Cleanup from ‘Rollup- Plugin-cleanup’plugins: [Cleanup () // Added a Cleanup plugin Tsplugin, AliasPlugin, CreateReplacePlugin (IsProductionBuild, ISBunlderesmbuild, ISCompat), … plugins],
   
Increase the main purpose of the Cleanup plug-in is to pack out non-comment

, it is the habit of my personal reading source, I think the role of comments and types is in an eye, so I will go first.

We need to implement a correct use before reading the source code, but I read the source code of this version, or Class, what should I do?
At this time we can guess and give the code according to the test case.


Function Block () {const start = performance.now () while (performance.now () – start

{this.msg = e.target .value}}), h (‘div “, list)]}}

 Now we have a strive, simple use case, next is A brain debug  < 2) {
 }
}

class Test extend Component {
 render (props) {
  block()
  return h('li', props.msg)
 }
}

class App extend Component {
 msg = ''
 render () {
  const list = []
  for (let i = 0; i  debug  
Since I also achieve time slice in FRE, I know it very well, I know its role. Principle, so we directly search for macro mission, ha, there is enough


WINDOW.ADDEVENTLISTENER (‘Message’, Event => {if (Event.Source! = = Window || Event.data! == Key) {Return;} FlushStartTimeStamp = GetNow (); try {flush ();} catch (e) {handleError (E);}}, false; function flushaftermacrotask () { Window.PostMessage (KEY, `*`);}

This code is very easy to understand, that is, the FLUSH function is performed in the macro tastery, continues

Then the key will come


 Function Flush () {Let Job; While (TRUE) {Job = stagequeue.shift (); if (job) {stagejob (job);} else {Break;} {const now = getnow (); IF (now - flushstarttimestamp> framebudget && job.expiration> now) {breaf; // here is key, meaning more than 16ms, or task expire, jump out of loop}}} ...   
The above cycle is critical, it is very simple, from StageQueue, one task, then execute StateJob


StateJob Very simple, it is a task of push in commitqueue


function stagejob (job) {if (job.ops.length === 0) {currentJob = Job Job.cleanup = Job (); currentJob = null; commitQueue.push (job); // Focus here job.status = 2;}}
   
to the current So, our source code is a bit loss, but it has been almost finished, you can say

Its essence is in the macro mission, STAGEQUEUE as a low priority task queue, continuous outbrand, then batch (16MS threshold) into the stack to CommTqueue

Call, in fact, if it is not a writing, you can go here. However, in order to make a word, we continue

We already know two queues, StageQueue and Commitueue, but don’t know what they are
  What is the scheduled? Print, you know:  
Console.log (stagequeue, commitqueue)


The result is


function mountcomponentInstance () {…}


See the name Component mount functions, of course, component update, and unloading functions are also synthetic


To now, we also know that participation is a function of the component mount update, so in nature, Vue time slice The basic unit is a component, that is, if your components are mounted for an hour, then you still have to card one hour
  
The remaining content is purely a number of words, which is except for the core scheduling


, such as CommitQueue is actions to operate DOM, then it’s actions
   Function commitJob (job) {const {ops, posteffects} = job; for (let i = 0; i 

As above, get OPS, then do it, let’s take a look at the OPS is ok


,

, Function Creactelement () {}]


Make together, is an array, including the method of the DOM operation and the modified element


Then the process is completed synchronous, that is, the so-called high priority task, must wait until complete collection, can cycle to execute it

After completing this, PosteffectQueue main It is some extra side effects and cleanup work. I really have a number of characters. I don’t print
  < ops.length; i++) {
    applyOp(ops[i]); // 重点在这里
  }
  if (postEffects) {
    postEffectsQueue.push(...postEffects);
  }
  resetJob(job);
  job.status = 0;
} 
Summary


Finally we use the most straightforward If you have a summary:

In the macro task queue, the constant transfer from the STAGEQEUE batch (16ms) to CommTqueue, transfer, Synchronize Dom
  
The principle actually uses a macro task queue. In fact, there is a little bit of Vue practices and FRE. FRE is in macro mission, and goes as much as possible to access the Reconcile large loop
  • About abolition

    As mentioned, the content of TIME SLICING has been removed in the master branch, and why I am freely Issue, I can stamp Here: (God, I will finally talk peacefully)

    https://github.com/Vuejs/rfcs/issues/89


    Simply put, it is the income of Time Slicing.In addition to it in Issue, its own scenario is less poor


    because Vue is currently realized, because the basic unit of scheduling is a component, it will still be due to the logic inside the component.

    For example, I changed the Block function used to block in the case to 1S, it has been completely card


    Thinking


    From the Issue and Source Code itself, we can think about some problems, simultaneous use of the number of characters


    Is the time slice?

    The answer is negative, especially the response is enough: https://github.com/Vuejs/rfcs/issues/89#issuecomment-546988615

    There are two points:


    In addition to high frame rate animations, other scenes can almost use anti-shake and throttle to improve response performance


    Vue now implementation, The particle size is too large, the final effect is very limited, not worth


    , FRE?


    Asynchronous rendering, does it also have this problem, and have to be acknowledged that although FRE is small, the blocking inside the component can be done, but the element itself can be blocked

    And the first question is also existing, that is, there is not much applicable scene

    But the FRE source level is still significant, even if this is now, it is found that it does not work , Side effects are not small, but FRE as a project of my personal learning and research, its value is not the business level
    I should stop, asynchronous rendering is fixed, just show everyone Its source code is implemented, and the future should not follow the react to engage a bunch of business API, such as UseTransition, etc.


    About the source code?

    Vue3 issued on the day, the source code interpretation is released, but so far, all source code interpretation is all
    shortcomings, and the source code of Vue is Rotten street …
    This phenomenon caused reflection, what do we read the source code for? Do you have an interview? In order to better write business?

    For me, just interested in this part of this source code, I will read, and I am only interested in the part

    In fact, everyone also saw, I have very few articles interpreted by the source code. Because I have always opposed the so-called [pass-by source code]
    will read the source code as a job, the same small function, read over again, repeat labor

    What is the difference between this and paste Shi?

      The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.
    © Copyright Notice
    THE END
    Just support it if you like
    like0
    share
    comment Grab the couch

    Please log in to comment