The core is the relationship between tasks and responsive objects, which is called the relationship between jobs and reactiveObj in this paper

What are jobs and reactiveObj?

Name a few chestnuts of job
  • redner job
  • computed job
  • watch job
Name a few reactiveObj chestnuts

  • The object created by the data function

    In the component instance initialization phase, data function is run and proxy is used to hijack the generated proxy object, which is called proxyData in this paper

  • Built-in objects created by computed methods

    Vue internally creates an object for a computed property function that has only one value, called computedData, and then defines a property on the component instance with the same name as the computed function. The get function is () => computeddata.value.

  • An object created by all props passed in

What is the relationship between job and reactiveObj?

When a job is generated, the track method is used to establish a dependency relationship between the job and the properties of the reactiveObj object. When the value of the reactiveObj property changes, the trigger method is used to execute the dependent job and re-establish the dependency.

Vue uses Proxy or Object.defineProperty to perform dependent operations when obtaining or changing the value of the reactiveObj property

Just a couple of examples

Render Job & proxyData property value

Render job, which will be executed immediately when the first rendering is mounted, will trigger its GET function to establish dependencies when the proxyData attribute is used in the rendering stage.

When the property of proxyData changes, its set function is triggered to trigger the render job. Since the render job is generated with scheduler configured as queueJob, the render task will be executed in the microtask queue.

Render job & computedData’s value attribute

Suppose the Render job uses a computedData and its calculation function uses proxyData.

When mounted, render Job is executed immediately. Render Job obtains computedData and generates computed Job. Computed Job performs calculation functions and establishes dependencies between computed Job and proxyData. Then computedData and Render Job actively establish dependencies.

When proxyData changes, computed Job is triggered. Computed Job manually triggers render Job, and render Job retrieves computedData, starting a new dependency binding process.