HTML属性とDOMプロパティの違い

Vueのv-bind:valueとv-bind:value.propの違いが分からず、それを理解するのにHTML属性とDOMプロパティの違いを理解する必要があったので備忘録として、記載します。

[v-bind:value]
HTML属性のバインドを行う

[v-bind:value.prop]
HTML属性ではなくDOMプロパティのバインディングを行う

ここで、HTML属性とDOMプロパティは、何が違うのかと疑問に思った。具体的なイメージで理解するために以下にサンプルコードを記載する。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Attributes vs DOM Properties</title>
</head>
<body>
  <input type="text" id="myInput" value="Hello">
  <button onclick="changeValue()">Change Value</button>
  <script>
    function changeValue() {
      var input = document.getElementById('myInput');
      
      // DOMプロパティを変更
      input.value = "Changed via DOM Property";
      
      // HTML属性を取得
      console.log(input.getAttribute('value')); // 出力: Hello
      
      // DOMプロパティを取得
      console.log(input.value); // 出力: Changed via DOM Property
      
      // HTML属性を変更
      input.setAttribute('value', 'Changed via HTML Attribute');
      
      // HTML属性を取得
      console.log(input.getAttribute('value')); // 出力: Changed via HTML Attribute
    }
  </script>
</body>
</html>

最初の表示では、以下のようになっている。(value="Hello"になっている) gyazo.com

[Change Value]ボタンをクリックすると以下のようになる。(value="Changed via HTML Attribute"になっている) これは、

input.setAttribute('value', 'Changed via HTML Attribute');

でHTML属性を変更しているため。上記のようにHTML属性を変更する処理を記載しないと、画面表示は切り替わるがHTML属性は、切り替わらない。 DOMを変更するだけだと画面表示は切り替わるが、HTML属性は切り替わらない。

gyazo.com

[v-bind:value]と[v-bind:value.prop]の違いがこれで分かったが、以下の流れになるので結果としてVueでは、同じ挙動となる。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind:value vs v-bind:value.prop Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.11/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-bind:value="message">
    <input type="text" v-bind:value.prop="message">
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue.js!'
      },
      methods: {
        updateMessage: function() {
          this.message = 'Updated message!';
        }
      }
    });
  </script>
</body>
</html>

①ページが読み込まれると、input要素のvalue属性は"Hello"に設定される。

②[Update Message]ボタンをクリックすると、updateMessageメソッドが呼び出され、messageデータプロパティが"Updated message!"に更新される。

③プロパティが更新されたことで、再レンダリングされる。　再レンダリングされる時に、HTML属性は、value="Changed via HTML Attribute"になっているので、DOMプロパティもvalue="Changed via HTML Attribute"になる。

ポイント

ページが表示される際に、HTML文書を読み込みHTMLの属性値に対応するDOMプロパティに初期値として設定される。
JavaScriptを使用してDOMプロパティを変更すると、その変更は即座にUIに反映されるが、HTML属性は更新されない。