A minimalist version of vue3.0 source code learning library

mini-vue3.0

A minimalist version of vue3.0 source code learning library, through learning vue3.0 core realization logic, so as to quickly grasp the vue3.0 core principles. When others are still toddlers, you are already on your feet.

Written in the front, as a pursuing front-end engineer, we are certainly not satisfied with the vue API call engineer . You need to learn the vue source code to improve your compelling style. Go to the pinnacle of life and win Bai Fumei. However, there is no way to learn the vue3.0 source code, and I am really worried. Don’t worry, mini-vue3.0 greatly simplifies the vue3.0 source code implementation. We only focus on the core logic implementation , allowing you to get started easily. I believe that if you learn through mini-vue3.0, you can read the source code, So Easy.

mini-vue3.0 mainly covers 5 function points: template compilation, data response, component mounting and updating, instruction compilation, component asynchronous scheduling and updating:

1. Principles of template compilation
2. Data response principle
3. Component update principle
4. Command compilation and execution
5. Component scheduling update

Todo-list

• Vue3.0 component template dynamic and static separation optimization principle

vue architecture diagram

Simpler rendering process diagram

A little more complicated rendering process diagram

Demo

Online demo address: mini-vue3.0 online demo demo

html page code

 <!-- Template code, id=app is the element mount point--> 
  < div  id =" app " > </ div > 
  <!-- Introduce mini-vue3.0 --> 
  < script  src =" ./ mini-vue.js " type =" text/javascript " > </ script > 
  <!-- Introduce demo.js code --> 
  < script  src =" ./demo.js " type =" text/javascript " > < / script >

demo.js code

// 子组件
const childComp = {
  props: {
    class: String
  },
  render() {
    return {
      type: 'div',
      props: {
        class: this.class,
      },
      children: [
        {
          type: 'text',
          props: {
            value: 'Hello Wrold'
          }
        }
      ]
    }
  }
} 
// Start App 
const  app  =  createApp ( { 
  template : `<div class="parent"> 
                <div style="text-align: center;margin-bottom: 20px"> 
                   Responsively periodically change the element style name, thereby changing the background color 
                </div> 
                <child-comp :class="propsData.class"></child-comp> 
              </div>` , 
  setup ( )  { 
    // 
    Reactive const  propsData  =  reactive ( { 
      class : 'before' ,
      show: true
    }) 
    // Change the class name regularly 
    setInterval ( ( )  =>  { 
      propsData . Class  =  propsData . Class  ===  'after' ? 'Before' :   'after' 
      propsData . Show  = ! PropsData . Show 
    } ,  1000 )

    return {
      propsData
    } 
  } 
} ) 
// global register assembly 
App . Component ( 'ChildComp' ,  childComp )

// Mount the App and render the App 
app . Mount ( '#app' )

Download Details:

Author: zyyrabbit

Source Code: https://github.com/zyyrabbit/mini-vue3.0

#vuejs #vue #javascript