Vue.js重新渲染静态内容

Question

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

https://jsfiddle.net/gustavompons/rtxqhyv2/1/

HTML

<div id="app">
    <input v-model="foo1">
    <div v-html="showFoo1()"></div>
    <div v-html="showFoo2()"></div>
</div>

JS

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
    }
  }
})

所以每当我输入输入时，我得到＆＃34;这不应该在输入上重新呈现＆＃34;在控制台中，我认为它并不好，因为没有理由每次都执行那段代码。

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

我正在使用vue.js v2

Answer 1

方法CanContentScroll property的结果将在每次重新呈现组件时执行。如果您想要缓存和依赖关系跟踪，请改用计算属性：

()

在访问它们时摆脱{{1}}。