javascript - 为什么单击按钮时，vue 对象中模板内的所有方法都会自动调用？

Question

我在 button 元素上创建了一个单击事件，并调用 increase 方法来更新计数器。我在页面加载时调用了 result() 和 result2() 方法。但是当我点击按钮时，它会自动调用。他们为什么打电话？ increase 和 result 方法之间的关系是什么？我怎样才能让他们只调用一次？

代码在这里:

<div id="app">
   <button v-on:click="increase">Click Me</button>
   <p>{{ counter }}</p>
   <p>{{ result() }}</p>
   <p>{{ result2() }}</p>
</div>

<script>
   new Vue({
       el: '#app',
       data: {
          counter: 0
       },
       methods: {
          increase: function() {
            this.counter++
          },
          result: function() {
            console.log('Hi I m result');   
          },
          result2: function() {
            console.log('Hi I m result 2'); 
          }
       }
   })
</script>

Answer 1

当您更新 counter 属性时，DOM 将重新渲染并调用脚本中的每个属性，例如数据、计算属性和方法(如果您只想在页面加载时调用这些方法)可以在 mounted 钩子(Hook)内调用它们:

new Vue({
  el: '#app',
  data: () => ({
    counter: 0
  }),
  methods: {
    increase: function() {
      this.counter++
    },
    result: function() {
      console.log('Hi I m result');
    },
    result2: function() {
      console.log('Hi I m result 2');
    }
  },
  mounted() {
    this.result();
    this.result2()
  }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<div id="app">
  <button v-on:click="increase" class="btn">Click Me</button>
  <p>{{ counter }}</p>

</div>