vue watch

Question

<div id="itany">
       <div>{{items}}</div>

    </div>

       
    <script>
      var vmvm = new Vue({
        el:"#itany",
        data:{
          count:0,
          items:[1,2,3,4,5]
        },
        watch:{
          "items":{
            handler(newValue,oldValue){
              console.log(newValue)
            },
            deep:true
          }
        }
      });
      console.log(vmvm.items[0]);
      vmvm.items[0] = 200;
    </script>

请问下，为什么console.log()为什么没有执行呢,而如果数组里面是对象的话就可以打印出来，

Answer 1

看文档

Answer 2

vue数组的检测是个特殊的存在，当使用arr[index]=a或者arr.length=0的的时候，watch无法检测到，vue提供了一些解决方法，比如vue.$set；

Answer 3

由于 JavaScript 的限制，Vue 无法检测到以下数组变动：

当你使用索引直接设置一项时，例如 vm.items[indexOfItem] = newValue
当你修改数组长度时，例如 vm.items.length = newLength

详细了解请点击此处