vue3介绍,Vue3的新特性
vue3介绍,Vue3的新特性
vue3的优势:
-
Vue 是目前国内开发最火的前端框架之一
-
Vue3性能更高,体积更小
-
Vue的compositionAPI(组合式API)可以 更好的代码复用,方便构建大型项目
-
对TS的支持比较好
-
社区生态已经逐步完善
组件(插件)名称 | 官方地址 | 官方地址 |
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
动机与目的:
-
更好的逻辑复用与代码组织
compositionAPI(新)代替了 optionsAPI(旧) , 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!
-
更好的类型推导(对typescript支持)
vue3 源码用 ts 重构, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测! )
vue3新特性:
-
数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
新的方案解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持
-
虚拟DOM - 新算法 (更快 更小)
-
提供了composition api, 可以更好的逻辑复用
-
模板可以有多个根元素
-
源码用 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
区别
-
vue2 采用的就是
optionsAPI
(1) 优点:
易于学习和使用
, 每个代码有着明确的位置 (例如: 数据放 data 中, 方法放 methods中)。(2) 缺点: 碎片化严重,相似的逻辑, 不容易复用, 在大项目中尤为明显
(3) 虽然 optionsAPI 可以通过mixins 提取相同的逻辑, 但是也并不是特别好维护
-
vue3 新增的就是
compositionAPI
(1) compositionAPI 是基于 逻辑功能 组织代码的, 一个功能 api 相关放到一起
(2) 即使项目大了, 功能多了, 也能快速定位功能相关的 api
(3) 大大的提升了
代码可读性
和可维护性
-
vue3 推荐使用 composition API, 也保留了options API
即就算不用composition API, 用 vue2 的写法也完全兼容!!
更多推荐
所有评论(0)