Vue.js 和计算属性答案

【问题标题】：Vue.js and Computed PropertiesVue.js 和计算属性
【发布时间】：2017-08-26 03:15:31
【问题描述】：

这是我的代码：

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

首先，为什么a的值会变成2？我认为由于 a 在计算属性之前，它的值应该是 1 然后在下一行调用计算属性的函数之后，它的值应该是 >2。你能帮我解释一下吗？

第二个：在 chrome DevTools 中，当我更改 a 的值时（如下所示）：

vm.a = 8

在p标签中，a的值变成a+1。为什么？！因此，每次我在 DevTools 控制台中更改 a 的值时，p 标签 中 a 的值都会变为 a+1！为什么调用计算属性的函数并更改 a 的值？

【问题讨论】：

First of all, why the value for a becomes 2? 因为你给它加了1。我不知道“在计算属性之前”是什么意思。它发生变化的原因是因为计算属性认为a 在reverseMessage 中使用。您不应更改 computed 属性中的数据。
@BillCriswell 我的意思是我将 1 添加到计算属性中的 a 并且 a 在计算属性之前呈现。所以我认为它的值应该是 1。
它发生得如此之快，你永远看不到。如果您从模板中删除{{reversedMessage}}，它将保留1。
我读过@Bert Evans 的可靠答案。
@BillCriswell 非常感谢，这部分答案是：“它改变的原因是计算属性认为 a 用于 reverseMessage。你不应该改变计算属性中的数据。”很有帮助。再次感谢你。 :)

标签： vue.js computed-properties

【解决方案1】：

因为a 是在您的数据中定义的，所以它变成了一个反应性属性。这意味着无论您何时更改它，更改都会在无处不在反映出来。这就是为什么 a == 2 最初出现在你的文本中，因为你 change 它出现在你的计算值中。

其次，如果您在 devtools 控制台中更改 a，reversedMessage 将被重新计算，因为您在其中引用了 a。所以顺序是

在 devtools 中更改 a。
reversedMessage 被触发，因为 a 在其中被引用。
a 现在等于 a + 1
Vue 更新引用 a、<p>{{a}}</p> 的 DOM

总而言之，a 将在您显示它的任何地方显示它的当前值，通过控制台更改 a 会导致 a 递增。

【讨论】：

非常感谢。现在我明白了:)
@pershianix 没问题 :)