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

Posted 2023-02-23

【中文标题】Vue.js 组件中的随机“data-v-*”属性

【英文标题】：random "data-v-*" attribute in Vue.js components

【发布时间】：2017-07-30 18:58:19

【问题描述】：

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

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

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

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

【参考方案1】：

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

【讨论】：

你知道删除 data-v-*

【参考方案2】：

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

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

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

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

【讨论】：

你是对的！所以实际上data-v-*属性来自vue CSS加载器，当且仅当使用scoped CSS。它们被用作应用 CSS 的选择器。很好，谢谢！

有没有办法在仍然使用作用域 CSS 的同时更改此默认行为？因为它最终会加载和解析更大的 CSS 文件......！

@ekqnp：不——这就是作用域的工作方式，它们需要哈希作为选择器。