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.启动项目

vue3介绍,Vue3的新特性_第1张图片

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 的写法也完全兼容!!

你可能感兴趣的:(前端,javascript,angular.js)