Vue.js和計算屬性

這裏是我的代碼：Vue.js和計算屬性

<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>

首先，爲什麼一個值變爲？我想既然一個是計算的屬性之前，它的價值應該是，然後在下一行，並要求計算性能的功能之後，它的價值將是。你能解釋一下給我嗎？

和第二：在鉻DevTools，當我改變爲的值的（如下面）：

vm.a = 8

在 p標籤

，該值爲一個變得一個+ 1。爲什麼？！所以每次我更改DevTools控制檯一個值時，在p標籤爲一個值成爲一個+ 1！爲什麼計算屬性的函數被調用並且更改了a的值？

來源

2017-03-31 pershianix

'首先，爲什麼a的值變成2？'因爲你給它加1。我不知道「計算屬性之前」是什麼意思。它改變的原因是因爲計算出來的屬性認爲在'reverseMessage'中使用了'a'。您不應該在「計算」屬性中更改數據。 –

@BillCriswell我的意思是我在計算屬性中加1，而在計算屬性之前呈現a。所以我認爲它的價值應該是1. – pershianix

它發生得如此之快，你永遠不會看到它。如果您從模板中移除了「{{reversedMessage}}」，它將保持爲「1」。 –

由於a是在您的數據中定義的，因此它將成爲反應性屬性。這意味着只要你改變它，這個改變就會反映出無處不在。這就是爲什麼a == 2最初在你的文字中，因爲你的change它在你的計算值。

其次，如果你在devtools控制檯更改a，該reversedMessage將重新計算因爲你參考a裏面。所以序列是

更改a devtools。
reversedMessage被觸發，因爲其中引用了a。
a現在等於a + 1
Vue的更新DOM引用a，<p>{{a}}</p>

總之，a是要顯示它的當前值到處都顯示出來，並通過控制檯改變a，使a到增加。

來源

2017-03-31 18:50:23 Bert

非常感謝。現在我明白了:) – pershianix

@pershianix沒問題:) – Bert

Vue.js和計算屬性

回答

相關問題