小编点评

**Vue.js 3.0 版本简介** **性能提升** - 性能提升 41%，初次渲染快 55% - 更新渲染快 133%，内存减少 54% - 使用 Proxy 代替defineProperty 实现响应式重写虚拟 DOM - 拥抱 TypeScript Vue3 支持 TypeScript4 **新特性** - Composition API setup配置 ref、reactivewatch与 watchEffectprovide与 inject 新建组件 Fragment TeleportSuspense **重要提示** - 声明所有 `data` 选项为函数 **安装和启动** - 使用 `vue-cli` 创建 Vue3 项目 - 进入工程目录 `cd vue3_test-vite` - 安装依赖 `npm install` - 运行 `npm run dev` **文件目录分析** - `main.js`：引入 `Vue`，创建应用实例并挂载 `App.vue` - `App.vue`：定义 Vue 组件，包含模板和事件处理程序 **示例代码** ```vue ``` **总结** Vue.js 3.0 版本带来性能提升和新的特性，使其成为构建Vue3应用程序的新选择。

正文

一、简介

2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）

github.com/vuejs/vue-n…

1.性能的提升

• 打包大小减少41%
• 初次渲染快55%, 更新渲染快133%
• 内存减少54%

2.源码的升级

• 使用Proxy代替defineProperty实现响应式
• 重写虚拟DOM的实现和Tree-Shaking

3.拥抱TypeScript

• Vue3可以更好的支持TypeScript

4.新的特性

1. Composition API（组合API）
   • setup配置
   • ref与reactive
   • watch与watchEffect
   • provide与 inject
2. 新的内置组件
   • Fragment
   • Teleport
   • Suspense
3. 其他改变
   • 新的生命周期钩子
   • data 选项应始终被声明为一个函数
   • 移除keyCode支持作为 v-on 的修饰符

二、创建一个Vue项目

1. 使用 vue-cli 创建

官方文档：cli.vuejs.org/zh/guide/cr…

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建Vue项目，选择Vue3
vue create vue3_test
## 启动
cd vue_test
npm run serve

2. 使用 vite 创建

官方文档：v3.cn.vuejs.org/guide/insta…

vite官网：vitejs.cn

• 什么是vite？—— 是Vue团队打造的新一代前端构建工具。
• 优势如下：
  • 开发环境中，无需打包操作，可快速的冷启动。
  • 轻量快速的热重载（HMR）。
  • 真正的按需编译，不再等待整个应用编译完成。
• 传统构建 与 vite构建对比图

传统构建模式，是将所有资源都打包好，再上线

而Vite是按需加载

接下来我们就用Vite来创建一个Vue3的项目

## 创建工程
npm init vite-app vue3_test-vite
## 进入工程目录
cd vue3_test-vite
## 安装依赖
npm install
## 运行
npm run dev

三、分析文件目录

main.js

Vue2项目的main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

我们再来看看Vue3项目中的main.js

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

createApp(App).mount('#app')

分析一下

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

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

App.vue

我们再来看看组件

在template标签里可以没有根标签了

<template>
	<!-- Vue3组件中的模板结构可以没有根标签 -->
	<img alt="Vue logo" src="./assets/logo.png">
	<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>