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>

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

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

vm.a = 8

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

的值

Answer 1

因为 a 在您的数据中定义，所以它变成了反应式属性。这意味着无论何时您更改它，更改都会反映到所有地方。这就是为什么 a == 2 最初在您的文本中，因为您 change 它在您的计算值中。

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

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

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

Vue.js 和计算属性

Vue.js and Computed Properties

vue.js

computed-properties