Analysis of petite-vue source code - why should you read the source code?

What is petite-vue?

According to the official explanation, petite-vue is designed to provide a responsive development model similar to Vue for historical projects that are not separated from front and back ends. Compared with the complete Vue, the biggest feature is that petite-vue re-renders by directly manipulating the DOM in the face of data changes.

For specific usage, please refer to GitHub, where I would like to show two examples:

Example 1 - Online Rendering

 <style>
  [v-cloak] {
    display: none;
  }
</style>
<div v-scope="App"></div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    App: {
      $template: `
      <span v-cloak v-if="status === 'offline'"> OFFLINE </span>
      <span v-else> ONLINE </span>
      `,
      status: 'online'
    }
  }).mount('[v-scope]')
</script>

The final output of the above code is <div><span> ONLINE </span></div> , but the rendering process is performed directly on the DOM Tree (divided into the following 4 steps). When the browser resources are tight, the entire rendering process will be visible to the user.

1. Generate template

    <div>
     <span v-cloak v-if="status === 'offline'"> OFFLINE </span>
     <span v-else> ONLINE </span>
   </div>

2. Removed v-cloak property

    <div>
     <span v-if="status === 'offline'"> OFFLINE </span>
     <span v-else> ONLINE </span>
   </div>

3. Parse the v-if and v-else instructions

    <div>
     <span v-if="status === 'offline'"> OFFLINE </span>
   </div>

    <div>
   </div>

4. final render

    <div>
     <span> ONLINE </span>
   </div>

Then the user is likely to see the splash screen phenomenon: ONLINE => OFFLINE ONLINE => OFFLINE => EMPTY => ONLINE

Example 2 - Componentization

 <div v-scope="App"></div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  const App = {
    $template: `
      <div v-scope="Counter(1)"></div>
      <div v-scope="Message()"></div>
    `
  }

  const Counter = initialCount => ({
    $template: `
      <span>{{ count }}</span>
      <button @click="handleAdd">ADD</button>
    `,
    count: initialCount || 0
    handleAdd() {
      this.count += 1
    }
  })

  const Message = () => {
    $template: `<div>{{ Counter.name }}</div>`
  }

  createApp({
    App,
    Counter,
    Message,
  }).mount('[v-scope]')
</script>

Although petite-vue does not provide a clear component construction method, we can still build our pages in components through the v-scope attribute. However, the above example has obvious problems with the global component registration mechanism. For example, in the example, even if the Message component does not need to be referenced, the Counter component can still be referenced, if the registered component is not Counter component's constructor, then the state of Counter will be accidentally modified.

 createApp({
  Counter: Counter()
})

The benefits of reading source code

1. By reading the source code to understand the parsing, scheduling and rendering process, coding for the rendering process can prevent and solve the problem of Example 1;
2. Although petite-vue is optimized for historical projects that are not separated from front-end and back-end, there is still a long way to go before it can actually cooperate with DOM manipulation frameworks such as LayUI and MiniUI. This requires us to be familiar with the internal mechanism of petite-vue and combine the existing technologies of the project. stack;
3. Petite-vue source code is indeed very small, combined with @vue/reactivity source code consumption, it is very suitable for entry Vue source code.

to be continued

In the future, we will use the application example as the entry, read and understand petite-vue and @vue/reactivity line by line, and implement our own petite-vue and responsive system, so stay tuned :)

"Anatomy of Petite-Vue Source Code" booklet

"Petite-Vue Source Code Analysis" combines examples to interpret the source code line by line from online rendering, responsive system and sandbox model, and also makes a detailed analysis of the SMI optimization dependency cleaning algorithm using the JS engine in the responsive system. It is definitely an excellent stepping stone before getting started with Vue3 source code. If you like it, remember to forward it and appreciate it!