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

Question

我在button元素上做了一个点击事件并调用increase方法来更新计数器。我在页面加载时调用了result()和result2()方法。但是当我点击 时button，它会自动调用。他们为什么打电话？什么是相互关系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

没有关系。每当您的组件重新渲染时，您的所有胡子 {{ }} 都会在调用方法时进行评估。