从方法中只调用一种方法

Question

在这个例子中，我更改了＆＃34; name＆＃34;通过方法：

＆＃13;

＆＃13;

new Vue({
  el: '#exercise',
  data: {
    name: 'Petr',
  },
  methods: {
    random: function() {
      return Math.random();
    },
    changeName: function(event) {
      this.name = event.target.value;
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="exercise">
  <p>VueJS is pretty cool - {{ name }}</p>
  <p>{{ random() }}</p>
  <div>
    <input v-on:input="changeName" type="text">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但每次调用方法changeName时，也会调用另一种方法（random）。

为什么？

Answer 1

来自Computed Properties - Computed Caching vs Methods：

  

相比之下，每当重新渲染发生时，方法调用将始终运行该函数。

什么时候重新渲染？？数据发生变化时。

在您的示例数据（即name）中，只要您输入<input>（因为它调用changeName），就会发生更改。

检查lifecycle diagram - 更具体地说，检查“已安装”的红球：

检查下面的演示，以便您看到正在发生的生命周期事件（以及它们之间的重新渲染）：

new Vue({
  el: '#exercise',
  data: {
    name: 'Petr',
  },
  beforeUpdate() {
    console.log('beforeUpdate executed');
  },
  updated() {
    console.log('updated executed');
  },
  methods: {
    random: function() {
      return Math.random();
    },
    changeName: function(event) {
      this.name = event.target.value;
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="exercise">
  <p>VueJS is pretty cool - {{ name }}</p>
  <p>{{ random() }}</p>
  <div>
    <input v-on:input="changeName" type="text">
  </div>
</div>

Answer 2

@acdcjunior非常清楚地解释了这个问题：

  

相比之下，每当重新渲染发生时，方法调用将始终运行该函数。

但是如果你真的想在你真正想要的时候绑定随机方法呢？这是解决方案：

修改后的HTML

<div id="exercise">
  <p>VueJS is pretty cool - {{ name }}</p>
  <p>{{ randomNumber }}</p>
  <div>
    <input v-on:input="changeName" type="text">
    <input type="button" @click="random" value="Generate Random Number">
  </div>
</div>

在前面的示例中，我们使用的是数据randomNumber。我添加了一个按钮，用于保存random方法，以便在点击它时生成随机数。

// modified data option:
data: {
  name: 'Petr',
  randomNumber: '' /* initialize randomNumber */
},
// modified random method
methods: {
  random: function() {
    /* Now, we return data randomNumber */
    return this.randomNumber = Math.random();
  },
  changeName: function(event) {
    this.name = event.target.value;
  }
},
created() {
  // we need to show random number when instance is created
  this.random();
}

这里到底发生了什么？应该调用方法random并且还应该生成随机数，对吗？

没有。方法random未被调用，因为我们没有在任何地方使用此方法，即。在我们的模板绑定中没有绑定random()。

所以，这意味着，只有在我们的模板中某处挂钩的方法时，才会调用该方法（在重新渲染之后）。