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

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

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

3.X 使用setup

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

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

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

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

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

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

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

完整 :

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