如何在Vue SFC Playground中从vueuse导入？

Question

当我尝试通过像

@vueuse/core": "https://www.unpkg.com/@vueuse/core?module

这样的导入映射添加 vueuse 时 - 由于某种原因，我没有在 vueuse 中获得工作反应性。

导入似乎按预期工作，我没有收到任何错误，但没有反应性。

play.vuejs.org

Answer 1

module

参数要求从unpkg加载导入映射中所有与Vue相关的条目：

将 JavaScript 模块中的所有“裸”导入说明符扩展为 unpkg URL。这个功能非常实验性

这不是在这个 Playground 中完成的，会导致由

vue

从 unpkg 加载重复的

@vueuse/core?

副本：

  "imports": {
    "vue": "https://play.vuejs.org/vue.runtime.esm-browser.js",
    "vue/server-renderer": "https://play.vuejs.org/server-renderer.esm-browser.js",
    "@vueuse/core": "https://www.unpkg.com/@vueuse/core?module"
  },

多个 Vue 副本是导致反应性丧失的已知原因。

这需要通过更改

vue

等来使用 unpkg 来解决。或者不应使用

?module

，并且应将正确的依赖关系树添加到导入映射（demo）：

  "imports": {
    "vue": "https://play.vuejs.org/vue.runtime.esm-browser.js",
    "vue/server-renderer": "https://play.vuejs.org/server-renderer.esm-browser.js",
    "@vueuse/core": "https://www.unpkg.com/@vueuse/[email protected]/index.mjs",
    "@vueuse/shared": "https://www.unpkg.com/@vueuse/[email protected]/index.mjs",
    "vue-demi": "https://www.unpkg.com/[email protected]/lib/index.mjs"
  },