Vueにおけるmethods、computed、watch属性の関連付けと区別

methodsプロパティ
Vueで関数またはメソッドを呼び出す場合は、methodsでメソッドを呼び出すことができます.次のようにします.

<template>
  <div>
        <h1>methods  h1>
        {{ getFullname() }}
        {{ getFullname() }}
        {{ getFullname() }}
        {{ getFullname() }}
  div>
template>

<script>
export default {
  name: "Methods",
  data() {
    return {
        firstname:' ',
        lastname:' '
    };
  },
  methods: {
      getFullname:function() {
          console.log('1')   // 4 1     
          return this.lastname + this.firstname
      }
  }
};
script>

上記の手順を実行すると、methodsにキャッシュがないため、コンソールに4つの1が印刷されます.またmethodではgetFullnameがメソッド名であり,呼び出し時には後ろに括弧を付ける必要がある.
computedプロパティ
上記のmethodsメソッドでは、同じ関数の繰り返し呼び出しが大量に発生すると、計算リソースが大量に消費されます.この場合、computedプロパティを使用する必要があります.以下のようにします.

<template>
  <div>
        <h1>computed  h1>
        {{ getFullname }}
        {{ getFullname }}
        {{ getFullname }}
        {{ getFullname }}
        {{ getFullname }}
  div>
template>

<script>
export default {
  name: "Methods",
  data() {
    return {
        firstname:' ',
        lastname:' '
    };
  },
  computed: {
      getFullname:function() {
          console.log('1')  // 1 1,     
          return this.lastname + this.firstname
      }
  }
};
script>

上記の手順を実行すると、ブラウザページに同様に「李四」が4回表示されますが、computedにはキャッシュがあり、上記の手順は同じ関数が複数回呼び出されたため、コンソールには1つしか印刷されません.また、computedのgetFullnameは、カッコを付けずに呼び出す属性です.
補足:実際には、各計算プロパティにはgetとsetプロパティが含まれています.上記の手順では、getを使用して読み込むだけで、もちろん指定しないとデフォルトもgetです.場合によってはsetメソッドも使用されます(一般的ではなく、理解すればいいです).

<template>
  <div>
        <h1>computed  h1>
        {{ getFullname }}
        {{ getFullname }}
        {{ getFullname }}
        {{ getFullname }}
        {{ getFullname }}
  div>
template>

<script>
export default {
  name: "Methods",
  data() {
    return {
        firstname:' ',
        lastname:' '
    };
  },
  computed: {
      getFullname:{
        set:function(newValue){
            console.log(newValue)
        },
        get:function(){
            return this.lastname + this.firstname //     
        }
      }
  }
};
script>

コンポーネント内のgetFullnameを再割り当てするとsetプロパティが呼び出されますが、一般的にはあまり使われません.
watchプロパティ
watchプロパティは、バインドされたデータの内容の変化を監視するために使用されます.以下のようにします.

<template>
  <div class=''>
      <h1>watch  h1>
      <input type="text" v-model='content'>
  div>
template>

<script>
export default {
  name: '',
  data(){
    return {
        content:'123'
    }
  },
  watch:{
      content:function(newValue,oldValue){
          console.log('oldValue:' + oldValue)
          console.log('newValue:' + newValue)
      }
  }
}
script>

入力ボックスコンテンツとdataのcontentバインドは、入力ボックスコンテンツが変化するとwatchプロパティを呼び出します.注意:watchを使用する場合は、上記のコードのcontentのような属性名とデータ名を一致させる必要があります.