为何Vue中修改无关num会触发v-for列表不必要更新？

先复现你的场景代码：

<ul id='app'> 
  <li v-for="item of items">{{ item | log }}</li> 
  <model :num='num'></model> 
  <!-- changing num will trigger <li> updates --> 
</ul> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> 
<script type="text/javascript"> 
Vue.filter('log', function(v) { 
  console.log(v + ' is updated!'); 
  return '#' + v; 
}); 
var app = new Vue({ 
  el: '#app', 
  data: { 
    num: 0, 
    items: ['a', 'b'] 
  } 
}); 
</script>

现象正如你所说：移除<model>标签时，修改app.num不会触发<li>的更新；但加上这个标签后，每次修改num，控制台都会输出a is updated!和b is updated!，明明items和num没有关联，却触发了列表更新。

核心原因：未知自定义元素导致Vue放弃静态优化 #

这个问题本质是Vue 2的模板编译优化机制导致的：

• 首先，你代码里的<model>既不是Vue 2的内置组件，也没有提前注册为自定义组件，Vue会把它认定为未知的自定义元素。
• Vue 2的编译器会对模板做静态分析，标记出哪些节点是静态的、哪些节点只依赖特定响应式数据，以此来避免不必要的重新渲染。比如没有<model>时，编译器能明确识别出v-for的列表只依赖items，num的变化和它完全无关，所以num更新时，列表不会被重新渲染。
• 但当模板中出现未知自定义元素时，Vue无法确定这个元素会不会影响父节点的渲染上下文（比如会不会修改父组件的状态），因此会放弃对该父节点下部分节点的精细化优化，把整个<ul>容器下的内容都视为需要重新渲染的动态内容。
• 这时候，只要父组件的任意响应式数据（比如num）更新，整个<ul>下的所有节点都会被重新生成，包括v-for的列表项，自然每个item都会经过log过滤器，触发控制台日志。

验证修复方法 #

如果你把<model>注册成一个合法的自定义组件，比如：

Vue.component('model', {
  props: ['num'],
  template: '<div>{{ num }}</div>'
});

再修改app.num，就只会触发<model>组件的更新，v-for的列表不会再重新渲染了——因为编译器现在能明确这个组件的行为，重新启用静态优化，精准判断出列表只依赖items，和num无关。

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