Vue.jsと計算プロパティがここ

Question

が私のコードです：すべての

<div id="app"> 
    <p>here is the message: {{message}}</p> 
    <p>{{a}}</p> 
    <p>here is the reversed message: {{reversedMessage}}</p> 

</div> 
<script type="text/javascript"> 
    var vm = new Vue({ 
    el: '#app', 
    data: { 
     message: 'Hello', 
     a: 1, 
    }, 
    computed: { 
     reversedMessage: function() { 
     this.a += 1; 
     return this.message.split('').reverse().join('') 
     } 
    } 
    }); 
</script> 

まず、なぜの値ははなり？私はは計算されたプロパティの前にあるので、その値はでなければならず、次の行で計算されたプロパティの関数を呼び出した後、その値はになります。これを私に説明してもらえますか？

及び第二：クロムデベロッパーツールで、Iはの値を変更するとき（以下同様）：pタグで

vm.a = 8 

は、値がためがなり+ 1。なぜ？！だから私はデベロッパーツールコンソールにの値を変更するたびに、pタグでの値は、+ 1になります！なぜ計算されたプロパティの関数が呼び出され、の値をに変更するのですか？

Answer 1

aはデータに定義されているため、反応的なプロパティになります。それはいつでもあなたがそれを変更することを意味し、変更はどこにでも反映されます。あなたの計算値にchangeがあるので、最初はあなたのテキストにa == 2という理由があります。あなたはデベロッパーツールのコンソールでaを変更した場合

第二に、reversedMessageは、あなたがその中aを参照するためがを再計算されます。したがってシーケンスは

1. devtoolsで変更します。 aが内部で参照されているため、
2. reversedMessageがトリガーされます。
3. a今Vueのは、DOMを要約するとa、<p>{{a}}</p>

を参照更新a + 1

、aは、それはあなたがそれを表示し、コンソール経由でaを変え、aへの原因どこでも現在の値のディスプレイに起こっているに等しくインクリメントされる。