[JavaScript知识库]Vue3简介

一、对比于Vue2，所带来的优势

1、性能得到了显著的提升；（打包大小减少了41%、初次渲染提速55%、更新渲染提速133%、内存减少54%）

2、源码的升级：

????????①、使用Proxy代替defineProperty实现响应式；

????????②、重写虚拟DOM的实现和Tree-Shaking；

3、Vue3能够更好的支持typeScript；

4、新的特性：

? ? ? ? ①、Composition API（组合API）

? ? ? ? ? ? ? ? setup配置、ref和reactive、watch和watchEffect、provide和inject等；

? ? ? ? ②、新的内置组件：

? ? ? ? ? ? ? ? Fragment、Teleport、Suspense等；

? ? ? ? ③、其他改变：

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

二、创建vue3.0工程

1、使用vue-cli（脚手架）创建

①、首先查看vue/cli的版本号是否在4.5.0以上

vue -V

vue --version

?

②、低于4.5.0更新vue/cli，高于则开始创建项目，在所需要创建的目录下，执行：

vue create 项目名

?

③、选择vue3项目，等待安装完毕即可；

2、使用vite创建

vite是新一代前端构建工具，由vue团队打造的；

优势：

1、开发环境中，无需打包操作，可快速冷启动；

2、轻量快速的热重载（HMR）；

3、真正的按需编译，不再需要等待整个应用编译完成；????????

步骤：

①、创建工程：

npm init vite-app 项目名

②、进入工程目录：

cd 项目目录

?

③、安装依赖

npm install

④、运行

npm run dev