vue.js - 为什么自乘返回的数字非常大？

Question

我有以下简单的 html 和 Vuejs 代码。当我运行它时，我惊讶地发现输出显示如下。

3 times num = 4.6383976865880985e+49

我期待看到30。

如果我创建一个变量并返回该临时变量，我确实看到了预期值 30。这里发生了什么？

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="test">
  <p>3 times num = {{ mulBy3() }}</p>
</div>

new Vue({
  el: '#test',
  data: {
    num: 10
  },
  methods: {
    mulBy3: function() {
      this.num = this.num * 3;
      return this.num;
    }
  }
});

标签： vue.js

Answer 1

这有一个重要的教训！Vue 会更新您的页面以反映模型中的更改。如果渲染页面导致模型发生变化（导致 Vue 重新渲染页面），那么您创建了一个无限循环 - 因此您的数字非常大。

这个故事的寓意是你不知道也不应该关心你的模板何时或多久渲染一次。您创建绑定，以便您的页面根据需要反映您的模型，然后让 Vue 来处理它。在实践中，永远不要从渲染函数中调用方法。渲染函数应该使用数据、注入、道具、计算，也许是观察：任何反应性的东西。方法应该用于响应用户活动并将其处理回模型中。