First update 2021-4-19

1, Main Changes in JS

In Vue2, the common main JS format is as follows:

import Vue from 'vue'
import xxx from 'XXX'
Vue.use(xxx)
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

But in Vue3, main The basic logic of JS has changed, which is somewhat similar to the chain call of java. The classic form is as follows:

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

const app = createApp(App).use(store).use(router)
installElementPlus(app)
app.mount('#app')

In my personal experience, if you want to install plug-ins or dependencies such as ElementUI, try not to install them manually. You should use Vue UI function in the root directory of the project and install them in the unified management interface. The operation and interface are as follows:

vue ui

After entering, the following interface appears:

Take ElementUI as an example. First open the plug-in page:

Then click the add plug-in button in the upper right corner:

The query results are as follows:

Select different element UI according to your Vue cli version and click Install to install it automatically.
Open the page again, and you will find that your project structure has changed to some extent. There are so many changes that it is difficult to enumerate. This is why I do not recommend manual installation of dependencies, which is very easy to cause problems.

2, Customized component capability

Personally, I think this is the most fundamental change of Vue3. This is an evolution of design ideas - each part of the page allows customization to be added or removed. Let me introduce one by one:

defineComponent

Each capability in vue3 is a module and needs to be introduced on demand.
The ability to define a component is no exception. This is defineComponent, which is introduced as follows:

import {defineComponent} from '@vue/composition-api'

The usage is as follows:

// Define a component
export default defineComponent({
  name: 'HelloWorld',
  // Value passed in by parent component
  props: {
    msg: String
  },
  // Define data, including data and methods in Vue2
  setup(){
    
  }
})

setup

All data and functions are uniformly configured in setup.

setup(){
    const data = reactive({
      hello: 'hello v3'
    })
    const sayHello = ()=>{
    }
    return {
      data,
      sayHello
    }
  }

In Vue2, we often define variables in the structure of data () {return {}}, but in Vue3, we no longer need to write them in this structure. Just define them anywhere in setup and throw them in the return of setup. In this way, the boundaries of variables and functions are completely blurred and regarded as completely consistent parts.
It should be mentioned here that if you want to define a responsive variable, you need to introduce the ability of reactive:

import {defineComponent, reactive} from '@vue/composition-api'

Life cycle function

The life cycle function in Vue3 changes greatly. The cycle function related to created is removed and its function is directly given to setup. That is, if you want to use the ability related to create, you should directly configure it in setup. Yes, setup combines definition, use, and life cycle.
The lifecycle functions that need to be explicitly used are as follows:

vue2	vue3
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

These life cycle functions are still a kind of component capability in essence and need to be introduced on demand, for example:

import {onMounted} from '@vue/composition-api'

3, Vuex is no longer recommended

Vuex is no longer recommended in the new version because Vue3 supports the ability of provide and inject globally. Here are some brief introductions to provide and inject. It is highly recommended that you first look at the introduction on the official website, and then come back to the tutorial:
Introduction to official website

provide and inject

provide provides the ability to define responsive global variables, and inject provides the ability to receive responsive global variables.
If you want to use it, you still need to import it on demand.

import{provide,inject} from '@vue/composition-api'

This capability needs to be used in setup as follows:

// Define a state you want to provide
// Responsive variable
const flag1 = ref('hello ref')
// Responsive object
const flag2 = reactive({
	newFlag: false
})
provide('flag1', flag1)
provide('flag2', flag2)

// inject
const flag1 = inject('flag1')
const flag2 = inject('flag2')

With this capability, we can configure constants in a global file and then provide. It seems that Vuex and bus in Vue2 can be replaced. But I have to further test its practicability