All geek questions in one place

Random attribute "data-v- *" in Vue.js components

While experimenting with Vue.js , the first thing I noticed was how each instance of the component that I define as a single file component and included as a custom item gets a random hash attribute, for example data-v-58fd7087="" . In particular:

  • Each DOM element of each instance of this component receives the same hash
  • Hash generated independently of router
  • Hash is stable between calls
  • Hash is persistent between component name changes
  • Hash is not saved / generated on disk
  • Thus, the hash is generated dynamically

Could it be created by Karma or Webpack , which are part of my Vue setup? If not, for me these are some surprising remarks. This leads to two questions:

  • When and how is this hash (attribute) created?
  • Why is the hash (attribute) generated?
+5
source share
2 answers

Something similar happens when using scoped CSS with Vue Loader.

I use scoped css and I have attributes like data-v-4646bc3c , so I believe that it is.

If you do not want this feature, try removing the scoped attribute from your individual file components.

 <style scoped> /* local styles */ </style>
+7
source

If you use vueify , and you are wondering why you get changes in your assembly without changing anything, make sure you use vueify with process.env.NODE_ENV set to 'production' . Otherwise, it generates a hot reload code that has new data-v-* hashes for each build.

0
source

Source: https://habr.com/ru/post/1265252/

More articles:


All Articles