Vueの算出プロパティ(computed)、監視プロパティとの比較

computedとは

関数で算出したデータを返すことができるプロパティ(getterということ)

データの加工を伴った取得ができる。
キャッシュが残るから、処理が早くなる。

computed: { 算出プロパティ: 関数のオブジェクト }

fullName: function() { return${this.firstName} ${this.lastName} }
→dataオブジェクトとバインドする
→<li>{{ fullName }}</li>にリアルタイムで表示される

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<ul id="app">
  <li>{{ firstName }}</li>
  <li>{{ lastName }}</li>
  <li>{{ fullName }}</li>
</ul>
<script>
  new Vue({
    el: '#app',
　  // dataオブジェクト
    data: {
      firstName: 'Taro',
      lastName: 'Yamada'
    },
　  // computed: { fullName: function()... }
    computed: {
      fullName: function() {
        return `${this.firstName} ${this.lastName}`
      }
    }
  })
</script>

lastNameの値を書き換えると、リアルタイムでfullNameが評価される。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input v-model="firstName">

  <input v-model="lastName">

  <span>{{ fullName }}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      firstName: 'Taro',
      lastName: 'Yamada'
    },
    computed: {
      fullName: function () {
        return `${this.lastName} ${this.firstName}`
      }
    }
  })
</script>

監視プロパテとの比較

基本的な動きは算出プロパティと同じのため、コードの見やすさ的に算出プロパティを使えば良さそう。

監視プロパティは非同期通信が行える。

watch オプションを利用することで、非同期処理( API のアクセス)の実行や、処理をどのくらいの頻度で実行するかを制御したり、最終的な answer が取得できるまでは中間の状態にしておく、といったことが可能になっています。これらはいずれも算出プロパティでは実現できません。(Vue.js公式より)

watch: { 監視プロパティ: 関数のオブジェクト }

watch: {
  data() {
    return {
      処理
    }
  },
  sample: function() {
    処理
  }
}

Ajax

ウェブアプリにデータを反映する手法で、Webサーバーから非同期処理でXMLデータを取得して、コンテンツに反映できる。DOMと相性良いらしい。

DOM

Document Object Model (DOM) は、HTML および XML ドキュメントのための API 。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にする。Web ページをスクリプトやプログラミング言語とつなぐような機構ということ。 (MDNより）

→つまり、Ajaxを使って動的なWebページを作成するときに、HTML・XML上のどの要素を変更するかを指定する。そこでDOMはHTMLやXMLを「ツリー構造」として展開し、アプリケーション側に文章の情報を伝え、加工や変更をしやすくしてくれる。
ツリー構造とは、データ構造の一つで、一つの要素(ノード)が複数の子要素を持ち、一つの子要素が複数の孫要素を持ち、という形で階層が深くなるほど枝分かれしていく構造のこと。

XML

XMLはタグを自由に設定でき、そのタグに意味づけをすることができる。
データのやりとりで「XML」を使えば、複数のデータを同時にやりとりしても、どのデータがどの要素なのか一発で判明できます。
ただ現在では、AjaxにはXMLの代わりにJSONという型がよく使われています。Ajaxという名前にXMLが入っているので、他の型は使えないように思いますが、そうではないんですね。