В Vue 3, как я могу наблюдать за изменениями в структуре массива, не отмечая ее как «глубокий» и наблюдая за каждым влож ⇐ Javascript

[Anonymous]

У меня есть этот код компонента, изначально записанный в Vue 2, используя API параметров, который теперь перенесен в Vue 3. Код был упрощен до следующего, где элементы добавляются/удалены из массива, а затем наблюдатель призван делать другие вещи (в данном случае просто консоль

Код: Выделить всё

Add
Remove

Items:
{{item}}



export default {
data() {
return {
items: [],
};
},
watch: {
items: {
handler() {
console.log('items', this.items);
},
//deep: true
}
},
methods: {
addItem() {
this.items.push({i: this.items.length});
},
removeItem() {
this.items.pop();
}
}
};

Это работало нормально в Vue 2, где элементы наблюдатель будет снимать каждый раз, когда элемент добавляется/удаляется из массива. У моего фактического объекта есть гораздо больше атрибутов, чем просто , поэтому, если я отмечаю наблюдателя Deep: true , наблюдатель стреляет, как и ожидалось, но представление становится непригодным для медленного. Как я могу сделать этот массив. Длина}]; , затем наблюдающего, как я и ожидал, но это также кажется действительно неэффективным, так как вы каждый раз создаете новый массив. Есть ли другой способ заставить наблюдателя запустить только на push /

Код: Выделить всё

pop

/

Код: Выделить всё

unshift

/

Код: Выделить всё

shift

/

Код: Выделить всё

splice

вызовы, которые изменяют структуру существующего массива без необходимости переназначить ссылку на массив или пометить массив как глубокий ?

Подробнее здесь: https://stackoverflow.com/questions/794 ... king-it-as