2022-11-21 vue3有哪些新增特性?

一.vue3快速上手

1.vue3带来了什么?

性能的提升

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

源码的升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking,用于去除未使用的JS代码

更好地支持Typescript

新的特性

特性1.Composition API(组合API)

setup配置
ref和reactive
watch和watchEffect
provide和inject

特性2.新的内置组件

Fragment
Teleport
Susponse

特性3.其他改变

新的生命周期钩子
data选项应始终被声明为一个函数
移出keyCode支持作为v-on的修饰符

2.vite

vite是新一代前端构建工具,有如下优势

开发环境钟,无需打包,可以快速的冷启动--动态地根据路由来加载对应模块
轻量快速地热重载
真正的按需编译,不再等待整个应用编译完成

使用vite创建一个vue3项目:create-vite-app vue3_vite

安装vite:npm install -g create-vite-app
创建项目:create-vite-app vue3_vite
进入项目目录后:npm i
运行:npm run dev

对比:使用脚手架vue-cli创建项目:vue create 项目名称

3.vue3项目文件与vue2的区别

vue.config.js:配置内容和vue2.0的一样，也就是webpack配置

main.js 只有三行代码

import {
    createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

其中,createApp是一个工厂函数,createApp(App).mount('#app'),也可以写成

let app=