Vue3.x 组合试api ref响应式引用笔记

Myth丶恋晨 2022-12-20 01:51 229阅读 0赞

[https://www.vue3js.cn/docs/zh/guide/composition-api-introduction.html\#%E5%B8%A6-ref-%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8F%98%E9%87%8F][https_www.vue3js.cn_docs_zh_guide_composition-api-introduction.html_E5_B8_A6-ref-_E7_9A_84_E5_93_8D_E5_BA_94_E5_BC_8F_E5_8F_98_E9_87_8F]

示例：根据用户查找内容

2.x

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70][]

3.X 使用setup

新的 `setup` 组件选项在**创建组件之前**执行，一旦 `props` 被解析，并充当合成 API 的入口点。

`setup` 选项应该是一个接受 `props` 和 `context` 的函数，我们将在[稍后][Link 1]讨论。此外，我们从 `setup` 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 1][]

但它还不能工作，因为我们的 `repositories` 变量是非响应式的。这意味着从用户的角度来看，仓库列表将保持为空。

换句话说，`ref` 对我们的值创建了一个**响应式引用**。使用**引用**的概念将在整个组合式 API 中经常使用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 2][]

完成！现在，每当我们调用 `getUserRepositories` 时，`repositories` 都将发生变化，视图将更新以反映更改。

完整 ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 3][]

[https_www.vue3js.cn_docs_zh_guide_composition-api-introduction.html_E5_B8_A6-ref-_E7_9A_84_E5_93_8D_E5_BA_94_E5_BC_8F_E5_8F_98_E9_87_8F]: https://www.vue3js.cn/docs/zh/guide/composition-api-introduction.html#%E5%B8%A6-ref-%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8F%98%E9%87%8F
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70]: /images/20221120/db0cdf6a066046739fb9e034e7420390.png
[Link 1]: https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#%E5%8F%82%E6%95%B0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 1]: /images/20221120/a835654a8afd46d5bf1a19606af555c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201109122405250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201109122544435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg=,size_16,color_FFFFFF,t_70