盘点 Vue3 与 Vue2 的区别

Vue3 的现状

2020 年 9 月 18 日发布，许多开发者还在观望。

2022 年 2 月 7 日称为默认版本，意味着 vue3 是现在也是未来。

中文文档

1. Vue3 中文文档(新) cn.vuejs.org/
2. Vue2 中文文档(旧) v2.cn.vuejs.org/
3. Vue3 设计理念 vue3js.cn/vue-composi…

了解框架优点特点

1. 首次渲染更快
2. diff 算法更快
3. 内存占用更少
4. 打包体积更小
5. 更好的 Typescript 支持
6. Composition API 组合 API

vite 构建工具

vite（法语意为 "快速的"，发音 /vit/，发音同 "veet") 是一种新型前端构建工具，能够显著提升前端开发体验。

对比 webpack：

• 需要查找依赖，打包所有的模块，然后才能提供服务，更新速度会随着代码体积增加越来越慢

vite 的原理：

• 使用原生 ESModule 通过 script 标签动态导入，访问页面的时候加载到对应模块编译并响应

• 基于 webpack 构建项目，基于 vite 构建项目，谁更快体验更好？vite
• 基于 webpack 的 vue-cli 可以创建 vue 项目吗？可以，慢一点而已

代码分析

1. 需要切换插件

vue3 组件代码和 vue2 有些不一样，使用的语法提示和高亮插件也不一样。

• vetur 插件需要禁用，安装 volar插件。

2. 总结 vue3 写法不同

 组件一个根节点非必需
 创建应用挂载到根容器
 入口页面，ESM 加载资源

平常组件

  <div>节点1</div>
  <div>节点2</div>
  </template>

main.js

import App from './App.vue'
// 根据App组件创建一个应用实例
const app = createApp(App)
// app应用挂载（管理）index.html的 #app 容器
app.mount('#app')

index.html

<script type="module" src="/src/main.js"></script>

总结：

• 安装 volar 禁用 vuter，也可以使用工作区模式启用对应插件
• vue3 中是使用 createApp() 管理容器，不是 new Vue()