vue3基础之项目创建和比较

在公司总是写vue2,vue3语法都忘干净了,于是进行复习整理,温故而知新.

vue3的新变化(主要):

1. 性能提升

   • 打包大小减少41%
   • 初次渲染快55%, 更新渲染快133%
   • 内存减少54%
   • 重写虚拟DOM的实现和Tree-Shaking(树摇)

2. 额外支持 Composition API（组合API）

   • setup
   • ref 和 reactive
   • computed 和 watch
   • 新的生命周期函数
   • 自定义hooks函数

3. 其它新增特性

   • Teleport - 瞬移组件的位置
   • Suspense - 异步加载组件的loading界面
   • 全局API的修改

项目创建

1. 使用 vue-cli 创建

• 安装或者升级: npm install -g @vue/cli
• 保证 vue cli 版本在 4.5.0 以上: vue --version
• 创建项目: vue create
• vue.config.json文件可以配置:

 devServer: {
  host: 'localhost',
  port:8000,
  open:true
 }

2. Vite 创建

• 优点

  • 快速的冷启动，不需要等待打包操作；
  • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
  • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

• 使用Vite创建

  • npm 6.x : npm create vite@latest my-vue-app --template vue
  • npm 7+的方式, extra double-dash is needed: npm create vite@latest my-vue-app – --template vue