为什么vue v-for list更新，即使数据相关没有改变

Question

代码：

<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>标记，它就可以了。但是，在我添加<model>代码并更改num的值后，v-for会同时更新（log过滤器被调用）。

Chrome控制台：

> app.num += 1
  a is updated!
  b is updated!

无论如何，items与num无关，没有必要更新。为什么和什么是错的？

Answer 1

  

Vue.js允许您定义可用于应用常见文本格式的过滤器。

在您的示例中，您根据文档

定义了一个名为log的全局过滤器

  

过滤器的函数总是接收表达式的值（前一个链的结果）作为它的第一个参数。

似乎任何本地数据更改时，过滤器log 都会被调用，并且因为它的值没有更改，所以始终打印相同的数组数据，但是＆＃39 ;并不意味着DOM得到更新。

让我们做一个小实验来证明li elements没有使用您的代码示例进行更新：

＆＃13;

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
    num: 0,
    items: ['a', 'b']
  },
  filters: {
    log: function (v) {
      return '#' + v;
    }
  },
  methods: {
    handleButtonClick() {
      this.num ++;
    }
  }
});

// ignore this is only to hide devtools info
Vue.config.devtools = false;
Vue.config.productionTip = false;

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<ul id='app'>
  <li v-for="item of items">{{ items | log }}</li>
  <p>Value of num is {{ num }}</p>
  <button @click="handleButtonClick">
    Update num ++
  </button>
</ul>

＆＃13;

＆＃13;

＆＃13;

现在打开chrome dev工具，然后在元素标签上检查li元素：

您应该看到只有num正在更新。看一下这个截图作为参考：