Vue.js 组件中的随机“data-v-*”属性

Question

在使用Vue.js 进行实验时，我注意到的第一件事是我定义为single file component 并包含为自定义元素的组件的每个实例如何获得一个随机散列属性，如data-v-58fd7087=""。 具体来说：

• 给定组件的每个实例的每个 DOM 元素都获得相同的哈希
• 哈希是独立于路由器生成的
• 两次调用之间的哈希值是稳定的
• 在组件名称更改之间哈希是稳定的
• 哈希未在磁盘上存储/生成
• 因此哈希是动态生成的

它可以由我的 Vue 设置中的 Karma 或 Webpack 生成吗？ 如果不是，这些对我来说是一些令人惊讶的观察。这就引出了两个问题：

• 此哈希（属性）何时以及如何生成？
• 为什么会生成哈希（属性）？

Answer 1

如果您正在使用 vueify，并且想知道为什么在没有更改任何内容的情况下在构建中进行更改，请确保您正在运行 vueify，并将 process.env.NODE_ENV 设置为 'production'。否则，它会生成热重载代码，在每个构建中都有新的data-v-* 哈希。

Answer 2

将scoped CSS 与 Vue Loader 一起使用时会发生类似的情况。

我使用作用域 css，我有 data-v-4646bc3c 之类的属性，所以我认为就是这样。

如果您不想要此功能，请尝试从单个文件组件中删除 scoped 属性。

<style scoped>
/* local styles */
</style>