[JavaScript知识库]Vue3：初体验

1.认识 Vue3

1. Vue3 支持 vue2 的大多数特性，也能更好的支持 Typescript
2. 性能提升
   • 打包大小减少 41%
   • 初次渲染快 55%, 更新渲染快 133%
   • 内存减少 54%
   • 使用 Proxy 代替 defineProperty 实现数据响应式
   • 重写虚拟 DOM 的实现和 Tree-Shaking
3. 新增特性
   • Composition (组合) API
   • setup
     • ref 和 reactive
     • computed 和 watch
     • 新的生命周期函数
     • provide 与 inject
     • …
   • 新组件
     • Fragment - 文档碎片
     • Teleport - 瞬移组件的位置
     • Suspense - 异步加载组件的 loading 界面
   • 其它 API 更新
     • 全局 API 的修改
     • 将原来的全局 API 转移到应用对象
     • 模板语法变化

2.创建Vue3项目的两种方式

1. 使用 vue-cli 创建

   ## 安装或者升级
   npm install -g @vue/cli
   ## 保证 vue cli 版本在 4.5.0 以上
   vue --version
   ## 创建项目
   vue create my-project
   

2. 使用 vite 创建

   • vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发。
   • 它做到了***本地快速开发启动***, 在生产环境下基于 Rollup 打包。
     • 快速的冷启动，不需要等待打包操作；
     • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
     • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

   npm init vite-app <project-name>
   cd <project-name>
   npm install
   npm run dev