preface

The previous article, Written Vue series Vue1. X, took you from scratch to implement the core principles of Vue1, including the following features:

  • Data responsive interception

    • Ordinary objects

    • An array of

  • Responsive update of data

    • Depend on the collection

      • Dep

      • Watcher

    • The compiler

      • Text node

      • v-on:click

      • v-bind

      • v-model

In the end, the birth and existing problems of Vue1 are also explained in detail: Vue1. X can perform well in small and medium-sized systems and update DOM nodes directionally, but in large systems, due to too much Watcher, resources are occupied too much and performance degrades. So Vue2 solved this problem by introducing vNodes and Diff,

So the next part of the series is to upgrade the lyn-Vue framework you wrote in the last article from Vue1 to Vue2. Therefore, it is recommended that the whole series be read and studied in order. If forced reading, it may produce a feeling of fog and fog, with less effort.

In addition, welcome to pay attention to the collection in case you get lost, at the same time, a series of articles will be included in the Vue technology stack source code principle column, also welcome to pay attention to the column.

The target

The updated framework needs to run the following sample code

The sample

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lyn Vue2.0</title>
</head>

<body>
  <div id="app">
    <h3>Principle of data responsive update</h3>
    <div>{{ t }}</div>
    <div>{{ t1 }}</div>
    <div>{{ arr }}</div>
    <h3>Methods + Computed + Asynchronous update queue principle</h3>
    <div>
      <p>{{ counter }}</p>
      <div>{{ doubleCounter }}</div>
      <div>{{ doubleCounter }}</div>
      <div>{{ doubleCounter }}</div>
      <button v-on:click="handleAdd"> Add </button>
      <button v-on:click="handleMinus"> Minus </button>
    </div>
    <h3>v-bind</h3>
    <span v-bind:title="title">Right-click the element to see my title property</span>
    <h3>V - model principle</h3>
    <div>
      <input type="text" v-model="inputVal" />
      <div>{{ inputVal }}</div>
    </div>
    <div>
      <input type="checkbox" v-model="isChecked" />
      <div>{{ isChecked }}</div>
    </div>
    <div>
      <select v-model="selectValue">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <div>{{ selectValue }}</div>
    </div>
    <h3>Principle component</h3>
    <comp></comp>
    <h3>Principle of slot</h3>
    <scope-slot></scope-slot>
    <scope-slot>
      <template v-slot:default="scopeSlot">
        <div>{{ scopeSlot }}</div>
      </template>
    </scope-slot>
  </div>
  <script type="module">
    import Vue from './src/index.js'
    const ins = new Vue({
      el: '#app'.data() {
        return {
          // The responsivity principle of primitive values and objects
          t: 't value'.t1: {
            tt1: 'tt1 value'
          },
          // Array response principle
          arr: [1.2.3].// Reactive update
          counter: 0.// v-bind
          title: "I am title".// v-model
          inputVal: 'test'.isChecked: true.selectValue: 2,}},// Methods + events + data responsive update principle
      methods: {
        handleAdd() {
          this.counter++
        },
        handleMinus() {
          this.counter--
        }
      },
      // How does computed + asynchronously update queues work
      computed: {
        doubleCounter() {
          console.log('evalute doubleCounter')
          return this.counter * 2}},/ / component
      components: {
        / / child component
        'comp': {
          template: ` 
       
 
        
{{ compCounter }}
 
        
{{ doubleCompCounter }}
 
        
{{ doubleCompCounter }}
 
        
{{ doubleCompCounter }}
 
         
          
       
`.data() {
            return {
              compCounter: 0}},methods: {
            handleCompAdd() {
              this.compCounter++
            },
            handleCompMinus() {
              this.compCounter--
            }
          },
          computed: {
            doubleCompCounter() {
              console.log('evalute doubleCompCounter')
              return this.compCounter * 2}}},/ / slots
        'scope-slot': {
          template: ` 
       
 
        
         {{ slotKey }}
         
       
 `.data() {
            return {
              slotKey: 'scope slot content'}}}}})// Data responsive interception
    setTimeout(() = > {
      console.log('********** getter, setter ************ for original value ')
      console.log(ins.t)
      ins.t = 'change t value'
      console.log(ins.t)
    }, 1000)

    setTimeout(() = > {
      console.log('the new value of the ********** property is the case for the object ************')
      ins.t = {
        tt: 'tt value'
      }
      console.log(ins.t.tt)
    }, 2000)

    setTimeout(() = > {
      console.log('* * * * * * * * * * verify the getter and setter properties on the deep intercept * * * * * * * * * * * *')
      ins.t1.tt1 = 'change tt1 value'
      console.log(ins.t1.tt1)
    }, 3000)

    setTimeout(() = > {
      console.log('********** updates the property value of the object to the original value ************')
      console.log(ins.t1)
      ins.t1 = 't1 value'
      console.log(ins.t1)
    }, 4000)

    setTimeout(() = > {
      console.log('********** interception of array manipulation methods ************')
      console.log(ins.arr)
      ins.arr.push(4)
      console.log(ins.arr)
    }, 5000)
  </script>
</body>

</html>

Copy the code

knowledge

The examples include:

  • A compiler based on template parsing

    • Parsing the template yields an AST

    • Generate rendering functions based on AST

    • render helper

      • _c, creates a VNode with the specified label

      • _v, creating vnodes of text nodes

      • _t: Creates a VNode of a slot node

    • VNode

  • patch

    • Initial rendering of native tags and components

      • v-model

      • v-bind

      • v-on

    • diff

  • Principle of slot

  • computed

  • Asynchronous update queue

The effect

The sample code will look like this:

instructions

The framework is only to explain the core principles of Vue, there is no robustness at all, you might change the example code may report errors, run not, but for learning is fully enough, basically the core principles of Vue (knowledge point) are implemented again.

So start the formal learning journey, come on!!

Focus on

Welcome everyone to pay attention to my nuggets account and B station, if the content to help you, welcome everyone to like, collect + attention

link

  • Proficient in Vue stack source code principles

  • Form a complete set of video

  • Learning exchange group