web-dev-qa-db-ja.com

Vue.jsコンポーネントのランダムな「data-v- *」属性

Vue.js を試してみると、最初に気づいたのは、- 単一ファイルコンポーネント として定義し、カスタム要素として含めるコンポーネントのすべてのインスタンスがdata-v-58fd7087=""のようなランダムなハッシュ属性を取得する方法です。 。具体的には：

  • 特定のコンポーネントのすべてのインスタンスのすべてのDOM要素が同じハッシュを取得する
  • ハッシュはルーターとは無関係に生成されます
  • ハッシュは呼び出し間で安定しています
  • ハッシュはコンポーネントの名前の変更間で安定しています
  • ハッシュはディスクに保存/生成されません
  • したがって、ハッシュは動的に生成されます

Karma または Webpack によって生成されますか？Vueセットアップの一部ですか？そうでない場合、これらは私にとっていくつかの驚くべき観察です。これは2つの質問につながります。

  • このハッシュ（属性）はいつ、どのように生成されますか？
  • なぜハッシュ（属性）が生成されるのですか？
vue.jsvuejs2vue-component
20
B M

スコープ付きCSS をVueローダーで使用すると、同様のことが起こります。

私はスコープ付きのcssを使用しており、data-v-4646bc3c、だから私はそれだと考えています。

この機能が必要ない場合は、単一ファイルコンポーネントからscoped属性を削除してみてください。

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

vueifyを使用していて、何も変更せずにビルドに変更が加えられる理由を知りたい場合は、process.env.NODE_ENVを'production'に設定してvueifyを実行していることを確認してください。それ以外の場合は、ビルドごとに新しいdata-v-*ハッシュを持つホットリロードコードを生成します。

1
e-e