Vue3 01 setup ref reactive

一、创建Vue3.0工程

1.使用 vue-cli 创建

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

2.使用 vite 创建

官方文档：安装 | Vue.js

vite官网：Vite中文网

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

 webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
vite直接启动开发服务器，请求哪个模块再对该模块进行实时编译。

vite优点：
1.webpack服务器启动速度比vite慢
2.由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显
3.vite热更新比webpack快
4.vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；
5.vite使用esbuild(Go 编写) 预构建依赖&#