【vue3、新手】最少获知API

vue3： 对于新手来说先掌握哪些API？

看到大家都说vue3的API有点多，这个嘛没有办法，要向下兼容vue2（optionAPI），还要支持自创的 template、响应性，这API就多了亿点点嘛。

那么怎么办呢，我们可以做做减法。

vue3的API

打开官网的API介绍 cn.vuejs.org/api/ ，好家伙整整五屏，六大类、二十六小类，具体多少个API我就不数了，太累。

做减法，去掉一些API：

• 先去掉 optionAPI，也就是选项式API，这样就省了六个小类。
• 再去掉生命周期钩子，现在已经不常用了，不着急看。
• 全局API也不急
• 进阶API，那当然是进阶之后再看了。

这样可以去掉一半左右，剩下的也就不多了。

首先掌握的API

那么我们先掌握哪些API呢？

• template， 模板里的API
  • 绑定值： 插值
  • 双向绑定： v-model
  • 判断： v-if、 v-else、 v-else-if
  • 循环： v-for
  • 事件： v-on，简写为 @，比如 <div @click="handler"></div>
  • 属性： v-bind，简写为 :，比如 <div :id="dynamicId"></div>
  • 显示： v-show
• script setup
  • 配合 v-model：defineModel
  • 定义属性：defineProps
• 响应性
  • 核心
    • ref，ref.value就是一个框，啥都能往里装。装引用类型先套 reactive。
    • reactive，深层响应，get引用类型的时候，套上 reactive。
  • 监听
    • watch，各种监听，用好了很爽，弄坏了得哭。
    • computed，计算属性？监听更适合他。

这样算算也就 15 个API，如果去掉 template 里面的 9 个，也就 6个 API 而已。这就不多了吧

template

虽然 template 里面就有很多API，但是都很简单：

• v-if 和 if 基本一样
• v-for 和 for 基本一样
• v-on 是绑定事件的，简写为【@】
• v-bind 是绑定属性的，简写为【:】
• {{}} 是绑定数据的

只要会基本语法，那么理解 template 里的API也就没啥问题了。

然后就是响应性，既然官网推荐 ref，那么就先无脑 ref ，然后再学其他的，比如 reactive 等。

最后把 script setup 里面那几个弄会了，就可以了。

是不是简单多了。

computed

为啥把 computed 放在监听里面呢？因为 computed 相当于 ref + watchEffect 的语法糖，如果只看“计算”，可能会被误导。

script setup 里面就两个API？

组件是vue的一个基础单位，里面可以用很多的代码，但是其实想想，也就是定义 props、emit，然后使用 ref 装载各种数据。

vue3.4 推出 defineModel 之后，就更简单了。

如果有需要的话，再加上生命周期、插槽、路由、状态管理等。想想也不多嘛。

后续掌握的API

• template
  • v-text，绑定文本的，类似插值
  • v-html，不解析直接显示。
  • v-slot，插槽
  • v-pre，不绑定插值
  • v-once，渲染一次就不刷新了。
  • v-memo，
  • v-cloak，渲染完成之前，不显示{{}}
• 响应性
  • reactive 相关
    • shallowReactive，仅第一层响应，get引用类型的时候，不会套上 reactive。
    • shallowReadonly，仅限制第一层只读，props 就是这个东东。
    • readonly，深层只读且响应
    • toRaw，取 reactive 的原型。
    • markRaw，不会被套 reactive
  • ref 相关
    • customRef，可以做防抖。
    • shallowRef，引用类型不套 reactive
    • triggerRef，
  • 工具
    • isRef，判断是不是 ref
    • unref，取值的一个语法糖
    • isProxy，判断是不是代理，自己定义的 Proxy 不算。
    • isReactive，是不是响应
    • isReadonly，是不是只读
  • 监听
    • watchEffect，自动判断监听谁
    • watchPostEffect，使用 flush: 'post' 选项时的别名
    • watchSyncEffect，使用 flush: 'sync' 选项时的别名。
• 依赖注入
  • 父组件：provide
  • 子组件：inject
• Typescript

vue为了让我们可以更方便使用，提供了很多的API，提到响应性我们首先想到的是 ref，其实还有浅层响应的 shallowRef，可以自定义的 customerRef，还有判断是不是 ref 的isRef等。
看起来眼花缭乱，其实也就那么回事。

TS还是可以学一学的，而且在Vue的环境里面学TS，可以更方便一些，因为vue会为我们建立好环境以及各种实例。
最后，class、Proxy、Promise、import、const、()=>{} 等，都是 es6 的。

其他API

至于其他的API当然也是可以看看的。