Vueの簡単な使用(3)v-model、methods、computed、watch

1.双方向データバインディング
2.計算属性と傍受
理解:
1.vueには一方向データストリーム(v-bind)と双方向データストリーム(v-model)がある
1.1
v-bindとinputの組み合わせも双方向のデータストリームを実現することができ、
v-bindは、入力ボックスの変更などの一方向のデータストリームであり、次のpのvalueは変更されない.
私たちの属性が変わると、彼はデータを変えることはありません.
私たちはv-onイベントを通じてデータを変更します.

export default {
    name:'app',
    data(){
        return{
          value:"zengcy"
        }
    },
    methods:{
     input:function(e){
       this.value=e.target.value;
     }
    
   }
}

1.2.双方向データバインド:v-model
valueの値を初期化します.
valueの値を変更します.

export default {
    name:'app',
    data(){
        return{
          count:0,
          count2:0,
          value:"zengcy"
        }
    }
}

2.methodsとcomputedの違い:
2.1.書き方の違い:
methods:result(),computed:カッコを付けないresult
2.2.レンダリングの違い:
methodsが関数を実行するとき、データが最新であることを保証するためにdataの属性countまたはcount 2を使用するかどうかにかかわらず、その中のすべての方法がレンダリングされます.関数がデータをレンダリングすると、任意のdomが変化すると、関数が再実行されます.1つの操作に任意のdomを操作する必要がある場合、関数という形式を使用することができます.
computedが関数を実行する場合、countというデータを含む関数のようなdataに使用される属性のみをレンダリングし、余分な操作を省略します.計算プロパティは一般的にデータを傍受するために使用され、1つのデータが変化すると、対応する操作を実行します.
3.第2の方法でデータを傍受する:watch、第1の傍受データはcomputedである
前の2つの書き方とは異なり、watchはdata内の属性の変化を監視し、count値が変化すると関数をトリガします.

export default {
    name:'app',
    data(){
        return{
          count:0,
          count2:0,
          output:""
        }
    },
    watch:{
     count:function(val){
       this.output=val>5?"  5"："  5";
     }
   }
}

4.watchとcomputedの違いは何ですか.
4.1.computedには戻り値があり、watchには戻り値は必要ありません
4.2.computedは同期コードで、watchには非同期コードを書くことができます