Vue.js 重新渲染静态内容答案

【问题标题】：Vue.js re-render static contentVue.js 重新渲染静态内容
【发布时间】：2018-05-01 09:24:07
【问题描述】：

我是 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>

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

所以每次我在输入中输入时，我都会在控制台中看到“这不应该在输入上重新渲染”，我认为这是不对的，因为没有理由每次都执行那段代码。

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

我正在使用 vue.js v2

【问题讨论】：

标签： vue.js

【解决方案1】：

方法are not cached的结果，每次重新渲染组件时都会执行。如果您想要缓存和依赖跟踪，请改用计算属性：

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

并在访问它们时摆脱()。

【讨论】：