Vue3---基础1（认识，创建）

变化

相对于Vue2，Vue3的变化：

性能的提升

打包大小减少 41%

初次渲染快 55%，更新渲染快133%

内存减少54%

源码的升级

使用 proxy 代替 defineProperty 实现响应式

重写虚拟 DOM 的实现和 Tree-shaking

TypeScript

Vue3就可以更好的支持TypeScript

新的特性

1. Composition API （组合式API）：

setup

ref 与 reactive

computed 与 watch

......

2. 新的内置组件

Fragment

Teleport

Suspense

......

3. 其他改变

新的生命周期钩子

data 选项应始终被声明为一个函数

移出 keyCode 支持作为 v-on 的修饰符

创建 Vue3 工程

基于 vue-cli 创建

脚手架是 webpack

目前 vue-cli 处于维护模式，官方推荐基于 vite 创建项目

## 查看 @vue/cli 版本, 确保在4.5.0以上
vue -version

## 安装/升级
npm i -g @vue/cli

## 执行创建命令
vue create vue_text

## 选择 3.x

## 启动

基于 vite 创建（推荐）

vite 是新一代的前端构建工具，官网地址： https://vitejs.cn, 优势如下：

轻量快速的热重载（HMR），能实现极速的服务启动

对 TypeScript、JSX、CSS 等支持开箱即用

真正的按需编译，不需要等待整个应用编译完成

创建

## 创建命令
npm create vue@latest

## 配置
 ---略

文件

extensions.json 里面是vscode内的插件

favicon.ico 是网页标题左侧图标

.gitignore 忽略文件

env.d.ts 让ts认识其他文件的配置（报红是缺少依赖 npm i 一下）

index.html 入口文件

package-lock.json

package.json 这两个是包的管理文件

README.md 工程介绍

tsconfig.app.json

tsconfig.json

tsconfig.node.json 这三个是ts的配置文件

vite.config.ts 整个工程的配置文件（安装插件、配置代理）