web-dev-qa-db-fra.com

attribut aléatoire "data-v- *" dans les composants Vue.js

Expérimenter avec Vue.js La première chose que j’ai constatée, c’est la façon dont chaque instance d’un composant que je définis comme composant de fichier unique et inclure comme élément personnalisé obtient un attribut de hachage aléatoire comme data-v-58fd7087="". . Plus précisément:

  • Chaque élément DOM de chaque instance d'un composant donné reçoit le même hachage
  • Le hachage est généré indépendamment du routeur
  • Le hash est stable entre les appels
  • Le hachage est stable entre les changements de nom du composant
  • Le hachage n'est pas stocké/généré sur le disque
  • Ainsi, le hachage est généré dynamiquement

Pourrait-il être généré par Karma ou Webpack qui font partie de ma configuration de Vue? Si ce n'est pas le cas, ce sont là des observations surprenantes. Cela soulève deux questions:

  • Quand et comment ce hash (attribut) est-il généré?
  • Pourquoi le hash (attribut) est-il généré?
vue.jsvuejs2vue-component
9
B M

Quelque chose de similaire se produit lorsque vous utilisez scoped CSS avec Vue Loader.

J'utilise scoped css et j'ai des attributs comme data-v-4646bc3c, alors je suppose que c'est tout.

Si vous ne souhaitez pas utiliser cette fonctionnalité, essayez de supprimer l'attribut scoped de vos composants de fichier unique.

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

Si vous utilisez vueify et que vous vous demandez pourquoi vous apportez des modifications à votre version sans rien changer, assurez-vous que vous utilisez Viewify avec le process.env.NODE_ENV défini sur 'production'. Sinon, il génère un code de rechargement à chaud comportant de nouveaux hachages data-v-* sur chaque génération.

1
e-e