• Changes to the responsive Principles API

The responsive principle of Vue2 uses defineProperty, while VUE3 uses proxy. The former is a permission label that modifies an object’s properties, and the latter is a proxy for the entire object. Proxy will be better in performance.

  • Diff algorithm, rendering algorithm changes

Vue3 optimizes the Diff algorithm. Instead of comparing all DOM like VUE2, block Tree is used. In addition, the rerendering algorithm has been improved to make use of closures for caching. This makes vuE3 six times faster than VUE2.

  • Create data

Here is the biggest difference between Vue2 and Vue3 — Vue2 uses the Options API compared to Vue3’s Composition API. The old Options API split the different properties in the code: Data, computed attributes, methods, etc. The new synthetic API allows us to divide by method (function), which makes the code simpler and cleaner than the old API, which uses attributes to group.

Unlike vuE2, when we define a vuE2 component, we express the component as an object, like this:

In VUE3, we define a component through a combination of method calls, like this:,

vue2

export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  }
}
Copy the code

Vue3 uses the following three steps to build reactivity data:

  1. Get reactive from Vue
  2. Use the reactive() method to call our data reactive
  3. Use the setup() method to return our reactivity data so that our template can retrieve it
import { reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })

    return { state }
  }
}
Copy the code
  • Create a template

For components, most of the code is very similar in Vue2 and Vue3. Vue3 supports Fragments, meaning that a component can have multiple root nodes. This new feature reduces the number of div-wrapped elements between many components. When developing Vue, we found that each component was wrapped in a div element. There will be many layers of redundant div elements. Fragments solve this problem.

  • The only real difference in Vue3 is data acquisition. Reactive Data in Vue3 is contained in a Reactive State variable. — So we need to access the reaction state to get the data value.

vue2

<template>
  <div class='form-element'>
    <h2> {{ title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    <input type='password' v-model='password' placeholder='Password' />
    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ username + ' ' + password }}
    </p>
  </div>
</template>
Copy the code

vue3

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input type='text' v-model='state.username' placeholder='Username' />
    <input type='password' v-model='state.password' placeholder='Password' />
    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div>
</template>
Copy the code
  • Vue2 compared with Vue3 methods writing

Vue2’s optional API separates methods into separate properties. We can add methods directly to this property to handle any front-end logic.

export default { props: { title: String }, data () { return { username: '', password: '' } }, methods: {login () {// login method}}}Copy the code

The setup() method in Vue3’s synthetic API can also be used to manipulate methods. Creating the name method is actually the same as the name data state. — We need to first name a method and then return it in the setup() method so that we can call the method from within our component.

export default { props: { title: String }, setup () { const state = reactive({ username: '', password: Const login = () => {return {login, state}}}Copy the code
  • Lifecyle Hooks

In Vue2, we can call the Vue lifecycle hook directly in the component property. The following uses a component mounted lifecycle to trigger hooks.

export default { props: { title: String }, data () { return { username: '', password: Mounted () {console.log()}, methods: {login () {// login method}}}Copy the code

The setup() method in Vue3’s synthetic API can now cover pretty much everything. Lifecycle hooks are one of them! But in Vue3 lifecycle hooks are no longer globally callable and need to be introduced separately from VUE. As with reactive, the lifetime mount hook is called onMounted.

Once introduced, we can use the onMounted hook in the setup() method.

import { reactive, onMounted } from 'vue' export default { props: { title: String }, setup () { // .. OnMounted (() => {console.log(' component mounted ')}) //... }}Copy the code
  • Compute Properties – Computed Properties

Let’s try adding a computed property to convert username to lowercase.

In Vue2, we just need to add in the option property within the component

export default {
  // .. 
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  }
}
Copy the code

Vue3’s design pattern allows developers to introduce dependencies as needed. This way, there is no need for redundant references to cause performance problems or too much post-packaging. Vue2 has this problem all the time.

So to use compute properties in Vue3, we first need to introduce computed in the component.

Just like with reactive data, add a computation property to state:

import { reactive, onMounted, computed } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    // ...
  }
Copy the code
  • Receive the Props

The receiving component props parameter passing area brings us the biggest difference between Vue2 and Vue3. — This in vue3 stands for something completely different from vue2.

In Vue2, this represents the current component, not a specific property. So we can use this to access the value of the prop property directly. For example, the following example prints the title parameter currently passed to the component at the end of the mount.

mounted () {
    console.log('title: ' + this.title)
}
Copy the code

But in Vue3, this can’t get props, emit events, and any other properties in the component directly. However, the new setup() method can take two parameters:

Props — immutable component parameter context-vue3 exposes attributes (emit, slots, attrs) so receiving and using props in Vue3 looks like this:

setup (props) {
    // ...

    onMounted(() => {
      console.log('title: ' + props.title)
    })

    // ...
}
Copy the code
  • Event-emitting Events

In Vue2 it is very straightforward to customize events, but in Vue3 we have more freedom of control.

For example, now we want to trigger a login event when the submit button is clicked.

In Vue2 we call this.$emit and pass in the event name and parameter object.

login () {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
 }
Copy the code

But in Vue3, we just said that this no longer represents this component in the same way that vuE2 does, so we need a different way to customize events.

What shall we do? ! ლ ლ ಠ yi ಠ)

$emit = “emit” = “emit” = “emit” = “emit” = “emit” = “emit” = “emit” = “emit” Then we just need to use the decomposition object method to fetch the emit in the second parameter that setup() receives and we are free to use it in the setup method.

Then we write the login event in the login method:

setup (props, { emit }) {
    // ...

    const login = () => {
      emit('login', {
        username: state.username,
        password: state.password
      })
    }

    // ...
}
Copy the code

vue2

<template>
  <div class='form-element'>
    <h2> {{ title }} </h2>
    <input type='text' v-model='username' placeholder='Username' />
    
    <input type='password' v-model='password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ username + ' ' + password }}
    </p>
  </div>
</template>
<script>
export default {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {
    console.log('title: ' + this.title)
  },
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    }
  },
  methods: {
    login () {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>
Copy the code

vue3

<template>
  <div class='form-element'>
    <h2> {{ state.title }} </h2>
    <input type='text' v-model='state.username' placeholder='Username' />
    
    <input type='password' v-model='state.password' placeholder='Password' />

    <button @click='login'>
      Submit
    </button>
    <p> 
      Values: {{ state.username + ' ' + state.password }}
    </p>
  </div>
</template>
<script>
import { reactive, onMounted, computed } from 'vue'

export default {
  props: {
    title: String
  },
  setup (props, { emit }) {
    const state = reactive({
      username: '',
      password: '',
      lowerCaseUsername: computed(() => state.username.toLowerCase())
    })

    onMounted(() => {
      console.log('title: ' + props.title)
    })

    const login = () => {
      emit('login', {
        username: state.username,
        password: state.password
      })
    }

    return { 
      login,
      state
    }
  }
}
</script>
Copy the code

Thank you for the article: zhuanlan.zhihu.com/p/139590941