“This is the 20th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

I have learned the use of Vue3.0 reactive APIS and the source code of Reactive functions. This article will be followed by the previous one, which will combine single-step debugging and source code for exploration

Step through

Write a simple example

<body>
  <div id="app">
    <p>{{ state.counter }}</p>
  </div>
  <script>
    const app = Vue.createApp({
      setup() {
        const state = Vue.reactive({
          counter: 1
        })

        setInterval(() = > {
          state.counter++
        }, 1000)

        Vue.watch(() = > state.counter, () = >{})return {
          state
        }
      }
    })

    app.mount('#app')
  </script>
</body>
Copy the code
  • Open up debugging, first findreactivefunction/packages/reactivity/src/reactive.ts.Step into theThe returnedcreateReactiveObjectfunction

  • Single stepLooking at internal execution,ProxyThe agent ofhandeler 是 baseHandlers, it is inreactiveIs passed in when called inmutableHandlers

  • findmutableHandlersThe location of the/packages/reactivity/src/baseHandlers.ts

Getter intercept

  • One of theget 是createGetterFunction, you can see it for the first timegetIn the data

  • Looking at the call stack at this point, you can see that it was defined in the previous examplewatchGet data for the first time

  • Single stepIf the data is not read-only! isReadonlyGo to thetrackRely on the collection function, and thenStep into theLook at the internal execution

  • Internally, a Map object that depends on the collection is generateddepsMapAccording to the current datakeyFrom the globaltargetMapI’m going to fetch, and if I didn’t find it the first time, I’m going to create a new valuedepThe collected dependencies are then executed to a dependency tracing functiontrackEffectsWill be current data dependenciesdepThe incoming

  • trackEffectsDetermines if there is a component update function in the dependency, and if not, puts it in

  • The getter is going to be executed several times, and once you collect the dependencies you can see what happens in the setter, you can cancel the breakpoint in the getter, okay

Setter intercept

  • Set the break point atcreateSetterFunction, you can see that the data has been rendered on the page, as in the examplesetIntervalChanged thecounterSo if you go to the setter, you get totriggerTrigger the component update function

  • Step into the triggerLet’s see, first we get the dependencies for the current data collectiondepsMapDepending on the collectiondepPut the component update function in

  • Then go to thetriggerEffectsTriggering the actual build update function will collect the dependencies and do the corresponding operations

  • Further down you can see that the page has also been updated

  • The update process was introduced in the previous article about Vue3.0 source learning – update process analysis

Reactive Function execution flowchart

According to the source code analysis and single-step debugging can be simply organized a flow chart