时间戳

首页 > 解决方案 > Vue 3 组合 API - ref 在 npm 包中不起作用

vue.js - Vue 3 组合 API - ref 在 npm 包中不起作用

问题描述

我有这个非常简单的 Vue 3 组件。一切正常。value每 0.5 秒更改一次（正在调用 console.log），并且浏览器中的值也每 0.5 秒更改一次。

<template>
  <pre>value: {{ value }}</pre>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const value = ref(false)

    setInterval(() => {
      value.value = !value.value
      console.log('value changed to ', value.value)
    }, 500)

    return { value }
  }
})
</script>

这是我的问题......如果我创建自己的 npm 包，假设@my/package使用以下代码：

import { ref } from 'vue'

const value = ref(false)

setInterval(() => {
  value.value = !value.value
  console.log('value changed to ', value.value)
}, 500)

export { value }

然后我在我的 Vue 3 组件中使用我的包，如下所示：

<template>
  <pre>value: {{ value }}</pre>
</template>

<script>
import { defineComponent } from 'vue'
import { value } from '@my/package'

export default defineComponent({
  setup () {
    return { value }
  }
})
</script>

然后它不起作用。确切地说，每 0.5 秒console.log记录一次不同的值（true或false），但我的浏览器仍然只呈现初始false值。

控制台中没有错误。ref()如果在我的 Vue 应用程序之外调用它，我的“反应性”似乎会以某种方式神奇地拒绝工作。

这也不适用于reactive()Vuex。我想创建一个 npm 包，它将公开一些反应式引用（由 创建ref()），而我的 Vue 应用程序将import这些值。在这种情况下如何保持反应性？我在这里想念什么？

编辑：我刚刚发现如果我将refVue 应用程序中的 传递给 npm 包函数，它确实可以正常工作。示例代码：

import { defineComponent, ref } from 'vue'
import { createValue } from '@my/package'

export default defineComponent({
  setup () {
    // Notice Im passing the ref to the createValue function
    const value = createValue(ref)
    return { value }
  }
})

和我的@my/package代码：

export function createValue (ref) {
  const value = ref(false)

  setInterval(() => {
    value.value = !value.value
    console.log('value changed to ', value.value)
  }, 500)

  return value
}

所以看起来ref我的 Vue 应用程序和ref我的包中的 不一样。但为什么？

编辑 2：我将我的保存ref在 Vue 应用程序中window.ref1 = ref，然后我将我保存ref在 npm 包中，例如window.ref2 = ref. 当我运行window.ref1 === window.ref2它是错误的。所以我内部的 Vue 应用程序和我在 npm 包中的ref不一样。ref我使用以下代码导入两者：

import { ref } from 'vue'

标签： vue.jsvuejs3refvue-composition-apivue-reactivity

解决方案

所以我找到了解决方案。问题是我@my/package使用$ yarn link命令链接了，所以我有两个vue. 因此，当我在我的 Vue 应用程序中导入时，它与在 @my/packageref中导入的函数不同。ref

这里最简单的解决方案可能只是简单地克隆 Vue 存储库并$ yarn link vue在 Vue 应用程序和包中运行。

推荐阅读