vue3介绍，Vue3的新特性

vue3的优势：

1. Vue 是目前国内开发最火的前端框架之一

   react, vue, angular的下载趋势

2. Vue3性能更高，体积更小

3. Vue的compositionAPI(组合式API)可以 更好的代码复用，方便构建大型项目

4. 对TS的支持比较好

5. 社区生态已经逐步完善

组件（插件）名称	官方地址	官方地址
ant-design-vue	https://antdv.com/docs/vue/introduce-cn/	ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步
element-plus	A Vue 3 UI Framework | Element Plus	Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
vant	Vant - Mobile UI Components built on Vue	有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间
Naive UI	https://www.naiveui.com/zh-CN/	一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript，不算太慢，有点意思
VueUse	https://vueuse.org/	基于composition组合api的常用集合，小兔仙项目会部分使用

 6. 积极拥抱新技术（不做弄潮儿，也不能太落后）

Vue3的新特性

Vue3 设计理念 组合式 API 征求意见稿 | Vue 组合式 API

动机与目的:

1. 更好的逻辑复用与代码组织

   compositionAPI（新）代替了 optionsAPI(旧) , 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!

2. 更好的类型推导(对typescript支持)

   vue3 源码用 ts 重构, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )

vue3新特性：

1. 数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)

   新的方案解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能

   (原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

2. 虚拟DOM - 新算法 (更快 更小)

3. 提供了composition api, 可以更好的逻辑复用

4. 模板可以有多个根元素

5. 源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

vite的创建vue3项目

1.使用vite创建项目

npm create vite
# or
yarn create vite

2.输入项目名字，默认为vite-project

3.选择创建的项目类型，选择vue即可

4.选择创建的vue项目类型， 不选ts

5.启动项目

vite快捷使用 

如果想要快速创建一个vue3项目，可以使用如下命令

• 创建普通vue项目

yarn create vite vite-demo --template vue

• 创建基于ts模板的项目

yarn create vite vite-demo-ts --template vue-ts

composition API (组合式API) vs options API

区别

1. vue2 采用的就是 optionsAPI

   (1) 优点:易于学习和使用, 每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)。

   (2) 缺点: 碎片化严重，相似的逻辑, 不容易复用, 在大项目中尤为明显

   (3) 虽然 optionsAPI 可以通过mixins 提取相同的逻辑, 但是也并不是特别好维护

2. vue3 新增的就是 compositionAPI

   (1) compositionAPI 是基于 逻辑功能 组织代码的, 一个功能 api 相关放到一起

   (2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api

   (3) 大大的提升了 代码可读性 和 可维护性

3. vue3 推荐使用 composition API, 也保留了options API

   即就算不用composition API, 用 vue2 的写法也完全兼容!!