# 一、vue3 简介

# 1、概要

  2020 年 9 月 18 日,Vue.js 发布 3.0 版本,代号:One Piece(海贼王)。

  vue3 第一次发布:

github 地址:v3.0.0 One Piece (opens new window)

# 2、改变

  简单的来说,相比 vue2 有以下改变:

  • 性能的提升

(打包大小减少、渲染速度更快、内存减少……)

  • 源码的升级

(使用 Proxy 代替 defineProperty 实现响应式、重写了虚拟 DOM 的实现……)

  • 拥抱 TypeScript

Vue 3 的代码库是用 TypeScript 编写的

# 3、新特性

  关于 vue3 的新特性如下:

  • Composition API(组合 API)

setup 配置、ref 与 reactive、watch 与 watchEffect、provide 与 inject ……

  • 新的内置组件

Fragment、Teleport、Suspense

  • 其他改变

新的生命周期钩子、data 选项必须为函数、

# 二、项目构建

# 1、webpack

webpack 官网 (opens new window)

  webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具

  当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

# 2、vite

vite 官网 (opens new window)

  vite 是尤雨溪在开发 vue3 的时候推出的基于原生 ES-Module 的构建工具。

  官网介绍说:vite 是下一代的前端工具链,为开发提供极速响应。

优势如下:

  • 开发环境中,无需打包操作,可快速的冷启动
  • 轻量快速的热重载(HMR)
  • 真正的按需编译,不再等待整个应用编译完成
  • ……

构建项目:

npm create vite@latest

注意

Vite 需要 Node.js 版本 14.18+,16+

# 3、vue-cli ✨

vue-cli 官网 (opens new window)

  vue 官方的 Vue.js 开发标准工具。

构建项目:

# 基于webpack构建
vue create <projectName>

说明

vue-cli 官方网站已经处于维护状态,并且官方更加推荐使用 create-vue 来创建基于 Vite 的新项目。

# 4、vue create

  目前,基于 vite 的构建工具项目create-vue (opens new window)已经发布。

# 基于vite构建
npm create vue@2
npm create vue@3

  并且,在最新的 vue3 官网中,明确说明了它提供的指令就是安装并执行了 create-vue:

提示

和基于 vue-cli 构建的 vue3 项目不同,基于 create-vue 构建的项目默认使用的是 😘 组合式 API 和 <script setup>,而非选项式 API。

请注意,生成的项目中的示例组件使用的是

npm init vue@latest

# 三、非单文件中

  • vue2
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">{{ message }}</div>

<script>
  new Vue({
    el: '#app'
    //
  })
</script>
  • vue3
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  import { createApp } from 'vue'

  createApp({
    //
  }).mount('#app')
</script>

# 四、项目结构

下面我们的对所有 vue-cli 构建的 vue2 和 vue3 项目进行比较。

# 1、main.js

  • vue2
// 引入的是构造函数
import Vue from 'vue'

import App from './App.vue'

// 创建一个vm
new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

通过打印,我们发现,vue3 的应用实例对象 app 比 vue2 应用实例对象要“轻”

  • vue3
// 引入的是createApp工厂函数
import { createApp } from 'vue'

import App from './App.vue'

// 创建一个app
createApp(App).use(store).use(router).mount('#app')

# 2、App.vue

  vue3 中的<div id="app"></div>可以省略,但实际存在。

<template>
  <!-- <div id="app"> -->
  <nav><router-link to="/">Home</router-link> | <router-link to="/about">About</router-link></nav>

  <router-view />
  <!-- </div> -->
</template>

# 3、store 文件

  • vue2
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //
})
  • vue3

趋势:从 class 类 ,改为了函数式

import { createStore } from 'vuex'

export default createStore({
  //
})

# 4、router 文件

  • vue2
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    //
  ]
})
  • vue3

趋势:从 class 类 ,改为了函数式

import { createRouter } from 'vue-router'

export default createRouter({
  routes: [
    //
  ]
})
更新于 : 7/8/2024, 10:21:14 AM