Vue.js重新呈现静态内容

我是Vue.js新手，我注意到一些内容在更改了不属于该内容的任何数据后重新呈现，下面是一个示例：

HTML

因此，每次我在输入上键入内容时，我都会在控制台中看到“这不应该在输入时重新呈现”，我认为这不好，因为没有理由每次都执行这段代码

这是Vue的工作方式还是我做错了什么

我正在使用vue.js v2

方法的结果，并将在每次重新渲染组件时执行。如果需要缓存和依赖项跟踪，请改用计算属性：

computed: {
  showFoo1 () {
    console.log('this is ok to execute on input')
    return this.foo1
  },
  showFoo2 () {
    console.log('this should NOT execute on input')
    return this.foo2
  }
}

当访问它们时，请去掉

（）

new Vue({
  el: '#app',
  data: {
    foo1: 'foo1',
    foo2: 'foo2'
  },
  methods: {
    showFoo1 () {
      console.log('this is ok to execute on input')
      return this.foo1
    },
    showFoo2 () {
      console.log('this should NOT execute on input')
      return this.foo2
    }
  }
})

computed: {
  showFoo1 () {
    console.log('this is ok to execute on input')
    return this.foo1
  },
  showFoo2 () {
    console.log('this should NOT execute on input')
    return this.foo2
  }
}