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 ，然后在下一行中，在调用计算属性的函数之后，它＆＃ 39; s值 2 。你能解释一下吗？

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

vm.a = 8

在 p标记中， a 的值变为 a + 1 。为什么？！因此，每当我在DevTools控制台中更改 a 的值时， p标记中 a 的值将变为 a + 1 < / STRONG>！为什么调用计算属性的函数并更改 a ？

的值

Answer 1

由于您的数据中定义了a，因此它会成为反应属性。这意味着无论何时更改它，更改都将反映在无处不在。这就是a == 2最初在您的文字中的原因，因为您change在计算值中。

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

在devtools中更改a。
reversedMessage，因为在其中引用了a。
a现在等于a + 1
Vue更新引用a，<p>{{a}}</p>

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

Vue.js和计算属性

1 个答案: