[Vuejs]-Due to limitations in JavaScript, Vue cannot detect the changes to an array. What is the limitations?

by

4đź‘Ť

âś…

As you can see in the “object change detection caveats” below, Vue is not using a Proxy to detect changes (probably due to lacking browser support) but it rather uses getter & setters:

 const example = {
  get value() { return this._value; },
  set value(v) {
   this._value = v;
   console.log("change detected");
  }
};

example.value = "test"; // change detected
example.unknown = "test"; // silence

Now that cannot detect additional properties as it would have to add getter & setters to every possible key, and that’s impossible. Also it cannot detect deletions as

 delete example.value;

also deletes the setter without any way to detect that.

For arrays it is the same, you could theoretically create a getter / setter pair for every possible index, but that wouldn’t really scale. Instead Vue hooks into the method that change an array, which works for all indexes.

👤Jonas Wilms

Leave a comment