From Vue2 to Vue3 [Zero] - Introduction to Vue3

Series Article Directory

content	Link
From Vue2 to Vue3 [zero]	Introduction to Vue3
From Vue2 to Vue3 [1]	Composition API (Chapter 1)
From Vue2 to Vue3 [2]	Composition API (Chapter 2)
From Vue2 to Vue3 [3]	Composition API (Chapter 3)
From Vue2 to Vue3 [4]	Composition API (Chapter 4)

---

---

foreword

As a popular JavaScript framework, Vue.js has been widely used in front-end development. With the release of Vue 3, this framework ushered in a series of changes and upgrades. This article will take you through the migration journey from Vue 2 to Vue 3 , and explore the changes and new features introduced by the new version. Whether you are a developer who has already used Vue 2, or a novice, this article will bring you valuable information and practical migration guidelines. Let's experience the new era of Vue 3 together .

---

1. What did the release of Vue3 bring?

1.1 Performance Improvement

• 41% reduction in bundle size
• 55% faster initial render, 133% faster update render
• 54% less memory
• …

1.2 Source code upgrade

• Use Proxy instead of defineProperty to achieve responsiveness
• Rewrite the implementation of virtual DOM and Tree-Shaking
• …

1.3 Support TypeScript

• Type-safe
  TypeScript is a statically typed superset that adds a type system to JavaScript that catches potential bugs during the development phase. With TypeScript, you can define clear types for Vue 3's components, props, data, and methods, providing better code readability, maintainability, and reliability. Type checking at compile time helps reduce runtime errors and provides a better development experience

• Code hinting and auto-completion
  TypeScript's support for code editors is very comprehensive, including powerful code hints and auto-completion. By using TypeScript to write Vue 3 code, you can get more accurate code hints, improve development efficiency and reduce the possibility of errors

• Ease of refactoring and maintenance
  The type system makes it easier to refactor and maintain Vue 3 applications. Thanks to clear type definitions, the compiler can help you find potential problem spots and provide timely feedback when refactoring is done. This makes refactoring code an easy and safe operation, while also reducing the risk of introducing bugs

• Ecosystem Support
  TypeScript is wildly popular in the JavaScript community and has become the language of choice for many projects. Vue 3's support for TypeScript allows it to better integrate with existing TypeScript libraries and tools, such as editors, build tools, testing frameworks, and more. This brings richer and stronger ecosystem support for Vue 3 developers

Overall, the combination of Vue 3 and TypeScript provides developers with a better development experience, higher code quality, and stronger ecosystem support. Whether you are a beginner or an experienced developer, using TypeScript to develop Vue 3 applications will bring you many benefits

1.4 New features

• Composition API (composition API)
  • setup configuration
  • ref and reactive
  • watch与watchEffect
  • provide and inject
  • …
• new built-ins
  • Fragment
  • Teleport
  • Suspense
• other changes
  • new lifecycle hook
  • The data option should always be declared as a function
  • Remove keyCode support as v-on modifier
  • …

1.5 UI component library that supports vue3

• element-plus
  element-plus (PC component library)
  is a Vue 3.0-based desktop component library for developers, designers and product managers.

• vant
  Vant (lightweight and reliable mobile Vue component library)
  Vant is an open source mobile component library by Youzan's front-end team. It was opened in 2016 and has been maintained for 4 years.
  At present, Vant has completed the adaptation of Vue 3.0 and released the Vant 3.0 version

• ant-design-vue
  ant-design-vue (PC component library)
  ant-design-vue is the Vue implementation of Ant Design, and the style of components is synchronized with Ant Design

2. Create a Vue3.0 project

2.1 What is Vite

Vite is a new type of build tool that has the following advantages over traditional Webpack:

• Fast development startup speed: Vite uses the native support of ES modules, and realizes a fast cold startup speed by utilizing the browser's native ES module loading capability. In development mode, Vite does not need to package and build the entire application, but only compiles and loads the file currently being edited through instant compilation and on-demand loading, thus providing a very fast development startup speed.

• Smaller build package size: Since Vite does not need to package the entire application in development mode, the built package size is smaller. This is very important for front-end performance and loading speed, especially for large applications, to reduce user waiting time.

• Native support for ES modules: Vite natively supports ES modules, and can run native ES modules directly in the browser without conversion through packaging tools. This allows developers to directly use the syntax and functions of ES modules, improving development efficiency and reducing some problems in the construction process.

• On-demand compilation and hot module replacement: Vite only compiles and loads the file currently being edited, not the entire application. This means that during development, only modified files are recompiled, speeding up hot module replacement and allowing developers to see the effects of modifications more quickly.

• Better development experience: Vite supports the use of native browser development tools during the development process, such as the browser console, debugger, and network panel. This makes it easier for developers to debug and optimize performance, providing a better development experience.

2.2 Use Vite to create a Vue3.0 project

create

npm init vite-app <project-name>

cd <project-name>

npm i

start up

npm run dev

There are more than one initialization method, you can refer to Vite official Chinese documentation on Vite official website

2.3 Create a Vue3.0 project using vue-cli scaffolding

Check the @vue/cli version and make sure the @vue/cli version is above 4.5.0

vue -V

create

vue create vue3_test

start up

cd vue_test
npm run serve

3. Changes in engineering structure

3.1 App view

vue3 components no longer need a root tag

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

3.2 main.js

Compared with Vue2, Vue's constructor is no longer introduced, and the createApp function is replaced by it. The
mounting method also sends changes.

// import Vue from 'vue'    vue2中
//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
import {
    
     createApp } from 'vue'
import App from './App.vue'

// new Vue({
    
    
//  el: '#app',
//  render: h => h(App)
//})   vue2中

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)
const app = createApp(App)

//挂载
app.mount('#app')

4. Developer tools

4.1 Install developer tools

There is a difference between the developer tools of vue2 and vue3! So to reinstall into the extension

Here is a link to the online disk Link
: https://pan.baidu.com/s/1JLMScyyc6qpVn7KHYeNjhA?pwd=qdbc
Extraction code: qdbc

First download it to a certain folder, then open the browser, click the three dots in the upper right corner of the browser, select Extensions –> Manage Extensions to
open the developer mode

, drag the previous Baidu network disk download into the browser to install it!

---

Summarize

Through the study of this column, you will have a deeper understanding of Vue 3, and have the knowledge and skills to migrate from Vue 2 to Vue 3. Whether you're considering upgrading an existing project, or getting ready to start a new Vue project, the upgrade to Vue 3 will bring you a better development experience and higher performance. As the Vue framework continues to evolve, we can expect more exciting and innovative features to come. Let's embrace the future of the Vue framework together!