问题标签 [vue-composition-api]

我遇到了 Vue 3 (alpha 4) 的问题：

在setup()函数内部，我试图读取父组件。根据 https://vue-composition-api-rfc.netlify.com/api.html#setup上的文档，它应该通过context参数公开父级，作为 context.attrs 的属性或直接作为父级（参见SetupContext'打字'下的位）。我发现文档对于是否parent应该直接从SetupContext或 via访问不是很清楚SetupContext.attrs，所以我尝试了两种方式，但无济于事。

这是我的问题，我可以在记录它们时访问SetupContextand SetupContext.attrs（这是一个代理）就好了。SetupContext.attrs公开通常的代理属性（和） [[Handler]]，并且在检查时清楚地显示父属性。[[Target]][[IsRevoked]][[Target]]

但是，当记录父级时，它只会打印出未定义的：

传播上下文会产生相同的结果：

我对 JavaScript 中的代理有点陌生，但是从我读到的关于它们的内容来看，以及从尝试响应 () 例如返回的代理。我应该能够像通常使用对象一样访问该属性。关于我做错了什么的任何想法？

我创建了一个代码框来重现问题

我正在用 jest 为我在 vue.js 中的组合 API 组件编写单元测试。

但我无法访问组合 API 的 setup() 中的函数。

指标.vue

指标.test.ts

我在运行测试命令时遇到了这个错误：

TypeError：无法读取未定义的属性“vm”

如果我这样设计我的组件：

我的商店是这样定义的：

有什么方法可以比{{ store.getters.count }}在模板中更好地访问计数？理想情况下，我只想像访问它一样访问它{{ count }}，但似乎只是store被动的。换句话说，如果我调度增量操作，即使我尝试以各种方式定义计数，{{ count }}` 也不会更新。这是我尝试过的一件事：

{{ count }}为什么在这种情况下不反应？

所以我一直在学习 Vue Composition API，想知道和之间有什么watchEffect区别watch。Watch说它和Vue 2手表一样，所以我猜watchEffect就像那个2.0？我想知道是否有任何特定情况下一个人比​​另一个人有很大的优势，比如停止 watchEffect 然后重新激活它而不是在普通手表中使用布尔值......或者他们只是基本上不同的方式写同样的东西。

谢谢！

参考：

观看效果： https ://vue-composition-api-rfc.netlify.com/api.html#watcheffect

观看：https ://vue-composition-api-rfc.netlify.com/api.html#watch

我正在为我的组件使用 Vuejs Composition Api，并为我的数据使用了响应式和 ref。

基于https://vue-composition-api-rfc.netlify.com/api.html#ref，他们应该在已传递给他们的对象的深层工作并使其具有反应性。

我目前面临一个问题，似乎模板在数据更改后没有重新加载，或者它似乎不是反应性的。

正如您在 onMounted 钩子中看到的那样，将获取数据并在 Table 组件中显示没有任何问题，但是在数据表之前加载的预选记录将不会更新

直到我在 :key 中使用 assignedList.length 来强制它重新渲染它。

我想知道我哪里弄错了。我真的很困惑这些是如何工作的，我们应该如何使用它们？这是代码：

我在vue中定义了一条路线：

哪个指向 UserComponent：

我使用computedfrom@vue/composition-api来获取数据。

问题是当路由更改为另一个时userId，通过导航到另一个用户，html 模板中的用户没有像我预期的那样改变。当用户不在列表中时，它也不会重定向。

那么我能做些什么来解决这个问题呢？

这是我的代码：

我一直在阅读即将在Composition API今年发布的 Vue 3 中引入的新功能。

虽然我一直在研究和探索这个主题，但我不明白为什么要使用“API”这个词。据我所知，API 用于在浏览器/应用程序和服务器之间发送/获取数据。

此外，Composition API 被设置为 Vue 2 中已经存在的可选替代品Options API。即使在这里，我也不明白在Options API.

有人可以解释一下吗？

我正在使用@vue/composition-api和 usePromise 来自vue-composable。

我观察从承诺返回的计算值。承诺在 12000 毫秒后解决。

computed和第一次watch被调用，但在 12000 毫秒后它们都没有被调用。所以手表回调不起作用。甚至 api.result 也发生了变化。

我可以通过打印看到模板中的值发生了变化：{{items}}.

如何解决这种意外行为？值变化时如何调用手表回调？

这是输出：

预期的：

编码：

这是作品：

但是为什么计算不起作用？如何让它重新计算，以便计算上的手表可以工作？

代码沙盒上的代码

我正在使用新的 Vue 插件来使用组合 API 和 TypeScript，但有些东西我不太了解。

我应该如何键入计算属性？

在这个简单的示例中，我声明了两个 ref 和一个计算属性来连接两者。VSC 告诉我计算属性正在返回ReadOnly类型......但我无法让它工作。

我正在使用 vue 组合 API 并为每个对象都有一个 value 属性的对象数组使用 ref，似乎打字稿将 ref 的值与每个数组内部的属性值混淆了：

如上图所示，typescript 告诉我们 arr 的类型是一个包含名称和值的对象数组，但是当我使用 ref 时，它检测到错误的类型。即使我像下面那样用作转换，问题也无法解决：

但是当我将 value 属性更改为 value2 或其他内容时，它将起作用：

更新：

这是我今天面临的另一个问题：

我想知道我应该如何解决这种类型的错误？