Vue 3 组合 API - ref 在 npm 包中不起作用答案

【问题标题】：Vue 3 composition API - ref doesn't work in npm packageVue 3 组合 API - ref 在 npm 包中不起作用
【发布时间】：2021-06-24 10:23:51
【问题描述】：

我有这个非常简单的 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>

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

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

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

编辑：我刚刚发现，如果我将 Vue 应用程序中的 ref 传递给 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
}

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

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

import { ref } from 'vue'

【问题讨论】：

标签： vue.js vuejs3 ref vue-composition-api vue-reactivity

【解决方案1】：

我建议在可组合函数中定义该代码，例如：

import { ref,onMounted } from 'vue'

export default function useValue(){
     const value = ref(false)

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

    return {value}
}

然后像这样使用它：


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

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

export default defineComponent({
  setup () {
  const { value} =useValue();

    return { value }
  }
})
</script>

EXAMPLE

【讨论】：

是的，我知道。我只是试图使代码尽可能简单。但是您的示例对我不起作用:(只有当我将ref 传递给您的useValue() 函数时才有效：useValue(ref)。我编辑了原始帖子。
它应该可以像import { ref } from 'vue'一样导入引用，无需将其作为参数传递
请查看此示例codepen.io/boussadjra/pen/LYxGozg
我检查了这个例子。感谢帮助。但这对我一点帮助都没有。我知道你的代码有效。它与我第一个显示的代码基本相同。问题是当我在 npm 包中创建 ref 值时它不起作用。
我不明白你所说的“构建”是什么意思。但问题可能出在我的开发过程中。我使用纱线并链接该包。我在包的根文件夹中运行“$ yarn link”。然后我在我的 Vue 应用程序的根文件夹中运行“$ yarn link @my/package”。然后我可以写类似import { ... } from '@my/package' 的东西，它可以工作，但问题是我的 npm 包有它自己的 Vue 副本。所以我在 npm 中的 ref 与我的 Vue 应用程序中的 ref 不同。我想弄清楚如何解决这个问题。

【解决方案2】：

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

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

【讨论】：