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和计算属性

回答

相关问题