Vue watch

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

    </div>

       
    <script>
      var vmvm = new Vue({
        el:"-sharpitany",
        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>

excuse me, why is console.log () not executed, but if there are objects in the array, it can be printed out?

Mar.11,2021

ide/list.html-sharp%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" rel=" nofollow noreferrer "> look at the document


vue array detection is a special existence. When arr [index] = an or arr.length=0 is used, watch cannot detect, and vue provides some solutions, such as vue.$set;.


due to the limitation of JavaScript, Vue cannot detect the following array changes:

when you use the index to set an item directly, for example, vm.items [indexOfItem] = newValue
when you modify the array length, such as vm.items.length = newLength

for more information, please ide/list.html-sharp%E6%95%B0%E7%BB%84%E5%8F%98%E5%8C%96%E6%A3%80%E6%B5%8B-Array-Change-Detection" rel=" nofollow noreferrer "> Click here

Menu