Vue3 brings new changes

To optimize the

  1. Performance improvement (zero cost: enjoy from vue2 to VUE3)

    Faster first rendering, faster diff algorithm, less memory footprint, smaller package size,….

  2. Better Typescript support (easier to write TS under VUE)

  3. New ways to write code: Composition API (Cost to learn)

Vue3 Design concept

Vue3 UI component libraries: Ant-Design-Vue, Element-Plus, Vant

A common collection based on the Composition API: VueUse

The obsolete part of Vue2 in Vue3

Vue3.0 is compatible with most of the syntax of version 2.0, but there are some damaging syntax updates, which should be paid attention to

  1. – Removed the $on method (eventBus is no longer supported by the existing implementation model and can be replaced with a tripartite plug-in)
  2. Remove filter options (interpolation can no longer use filter, can use Methods instead)
  3. – Removed.sync modifier (v-bind cannot use the.sync modifier, it is now merged with v-model syntax)

For more information, see the official website

Development environment setup

Create a project

Command: Vue create project name

The selected Vue3 Preview

The correct version

Manual download version: NPM I VUe-loader-v16

Directory analysis

Mainly look at three positions:

  1. package.json
  2. main.js
  3. app.vue

package.json

Json file, as shown in the Dependencies configuration item. The version we currently use is 3.0.0

"dependencies": {
    "core-js": "^ 3.6.5." "."vue": "^ 3.0.0"
}
Copy the code

main.js

Then open the main.js entry file and notice that the Vue instantiation has changed a bit, from the previous new keyword instantiation to the createApp method invocation.

Vue2. X

new Vue({
  el: '#app'.render: h= > h(App)
})
Copy the code

Written vue3. X

import { createApp } from 'vue'
import App from './App.vue' / / the root component
createApp(App).mount('#app')
Copy the code

app.vue

Opening app.vue reveals that the single file component of Vue3.0 no longer requires a unique root element

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
Copy the code