Vue.js静态内容重渲染问题咨询：修改非关联数据触发无关内容重渲染

嘿，作为Vue新手遇到这个问题太正常了，我来帮你理清楚背后的原因，以及怎么搞定它～

问题根源 #

你发现修改foo1时，明明showFoo2和foo1完全不相关，却还是会被调用。这是因为Vue的组件更新逻辑：只要组件的响应式数据发生变化，Vue会重新执行整个模板的渲染流程，模板里所有的方法调用都会被重新跑一遍。Vue没办法自动精准追踪每个方法依赖了哪些数据，所以只能采取这种“全量刷新模板内方法”的策略。

解决方案 #

针对这个场景，有两种常用的解决办法，按需选择就行：

1. 使用计算属性（推荐）

计算属性是Vue专门用来处理“依赖响应式数据的计算逻辑”的特性，它会自动缓存计算结果，只有当它依赖的响应式数据变化时，才会重新计算。把你的方法改成计算属性就能避免不必要的执行：

修改后的完整代码：

<div id="app">
  <input v-model="foo1">
  <div v-html="computedFoo1"></div>
  <div v-html="computedFoo2"></div>
</div>

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

现在你修改foo1时，只有computedFoo1会重新执行，computedFoo2因为依赖的foo2没变化，会直接返回缓存的结果，不会触发console打印。

2. 使用v-once指令

如果你的场景中某些内容是完全静态、永远不需要更新的，可以给对应的元素加上v-once指令。这个指令会让元素只渲染一次，之后组件更新时不会再重新渲染它，自然也不会调用对应的方法：

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

这样修改foo1时，第二个div不会重新渲染，showFoo2也就不会被调用了。

总结 #

• 优先用计算属性：适合需要基于响应式数据动态计算，但又想避免重复执行的场景，是Vue的最佳实践。
• 用v-once：适合完全静态、不需要更新的内容，简单直接。

内容的提问来源于stack exchange，提问作者Matias Pons