Quickly get started with Vue3 from Vue2, super detailed, just read this article!

01 Preface

With the continuous development of the Vue3 version, more and more partners have officially joined the Vue3 development camp. Recently, Youda also publicly stated that Vue3 will also be the default version of Vue in the future. If there are friends who are not familiar with this, please check my previous article for a detailed introduction.

Although Vue3 continues to mature and stabilize, some friends are still stuck in Vue2. They only have a general understanding of Vue3 and have not conducted in-depth study. Some people don’t have time to learn, some feel there is no need to learn, sometimes they don’t know how to learn, and a series of other reasons. But no matter what, we need to join the learning of Vue3 as soon as possible. No one knows whether Vue2 will be stopped in the future.

So I compiled a guide for you on how to transition from Vue2 to Vue3, hoping to help you save a little learning cost. Let everyone avoid detours.

This article will not cover specific changes, such as what new uses watch has. The official website introduces it much better than me. I will focus on how to quickly get started with Vue3.

02 How to learn Vue3

In fact, for Vue3, the changes are relatively large. Fortunately, it is compatible with the writing method of Vue2. You can try to use Vue2 writing method to write the project in Vue3 first and get a feel for Vue3. This can slowly learn at work and work while learning. It is also a way to master Vue3 quickly.

Many friends like to watch videos to learn. This method is more intuitive, but the only disadvantage is that the learning cost is a bit long and it takes a lot of time to learn repetitive knowledge.

So I recommend that you go to the official website and read the documentation of Vue3 first. A lot of knowledge is similar to Vue2, so you don’t need to learn this knowledge anymore. Just learn what you haven't learned before.

03 Compared with Vue2, what are the major changes in Vue3

Compared with Vue2, Vue3 mainly has the following changes:

• The underlying principle of data responsiveness
• More friendly support for Typescript language
• The introduction of setup allows the project to be better maintained
• The syntactic sugar function of setup is really delicious.
• If possible, learn Vite2
• Component libraries based around Vue have been upgraded and adapted, such as vue-router, vuex (pinia), some component libraries based on Vue3 (naive-ui, antd), etc.
• The introduction of the use (hook) concept is very convenient
• The new plug-in volar for the development tool vscode replaces vetur
• Upgrade adaptation of devtools
• Some specific details and other changes (new usage of watch, compute, etc.)

Personally, I think it is more important. The knowledge that needs to be mastered is:

• Vue3 data responsiveness principle, use of ref, reactive and other APIs
• The use of setup and setup syntax sugar
• Basic usage of vite2
• Vue3 peripheral library upgrade and use
• The use of watch, compute, and life cycle functions in setup

Migration Guide

This part is clearly described onvue3 official website. Here is a screenshot for everyone to see:

New features

Composable API

In fact, some clues can be seen from the word "combined API". To put it bluntly, it means combining various methods, like building blocks. We need to know the following knowledge points about the combined API:

setup component options

Setup is the entrance to the combined API. Like data, computed, watch, and methods in vue2 before, it defines the entrance to the combined API. The rough setup combined API is as follows:

<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  setup(props,context){
    console.log(props,context)
  }
}
</script>

The above setup contains the combined API. Since it is called combined, all the variables, life cycle functions, watch monitoring, computed properties, methods, etc. in the data in vue2 can be put into the setup. I believe that most people should understand by now. In fact, the parts that were previously scattered into data, life cycle, watch, computed, and methods are now all integrated together. The advantage of this is that we can extract some business or logic. , and then import it directly where needed, which is more convenient than in vue2. Then let’s take a closer look at how to do each part.

Reactive variable with ref

To put it bluntly, this part is to integrate the variables previously placed in the data into the setup. Of course, since it is a responsive variable, it will definitely not be directly defined with var, let, etc. like js, so a ref function is introduced. Declare reactive variables. The specific usage is as follows:

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

Note two points:

1. Ref must be introduced in vue; 2. The ref function makes any responsive variable work anywhere; 3. When getting the value, you need to get the attribute value 

In fact, the official here also explains that the essence is to use reference transfer in value transfer. The ref function is the default value when it is defined. It can be defined as string, array, object, Boolean and other types of data.

Register life cycle hooks in setup

We know that vue2 also has various hook functions for various life cycles, so vue3 will definitely be included in the setup, as follows:

setup(props,context){
  console.log(props,context)
  onMounted(()=>{
    console.log('666')
  })
}

watch responsive changes

The same watch can also be placed in setup. In setup, watch as a function accepts three parameters: the monitored value, callback, and optional configuration. Examples are as follows:

import { ref, watch } from 'vue'

setup(){
  const counter = ref(0)
  watch(counter, (newValue, oldValue) => {
    console.log(counter.value)
  })
}

Global API

The global API is some of the global APIs previously defined in main.js in vue2, such as: component global components, directive global instructions, mixin global mixing, use global plug-in usage, config global configuration, etc. These global APIs have changed a lot in vue3. The first thing to talk about is the instance of vue. In vue2, we used new to obtain the instance of vue. Now there is a new global API in vue3 to obtain the instance of vue: createApp . So the main.js file has changed, as follows:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.component('my-component', {}) // 全局组件注册
app.directive('my-directive', {}) // 全局指令
app.mixin({}) // 全局混入

app.use(store).use(router).mount('#app')

other

Lifecycle function changes

• destroyed lifecycle option renamed to unmounted
• beforeDestroy lifecycle option renamed to beforeUnmount

Excessive class renaming

The transition class name v-enter is changed to v-enter-from, and the transition class name v-leave is changed to v-leave-from

template has no special instruction markup to render natively

Markers without special directives (v-if/else-if/else, v-for or v-slot)