#vue.js #vuejs2 #vue-component #vuejs3 #vue-reactivity
#vue.js #vuejs2 #vue-компонент #vuejs3 #vue-реактивность
Вопрос:
Какова альтернатива Vue.delete в новом API реактивности Vue 3?
Ответ №1:
Vue.delete и Vue.set не нужны в Vue 3. Благодаря новой системе реактивности, использующей прокси, Vue может обнаруживать все изменения в реактивных данных.
Вы можете использовать delete оператор JavaScript:
delete obj[key]
Вот демонстрация Vue 3, удаляющая и добавляющая свойства объекта с помощью ванильного JavaScript:
const { createApp, reactive } = Vue;
const app = createApp({
setup() {
const obj = reactive({ a: 1, b: 2, c: 3 })
return { obj }
}
});
app.mount("#app"); <div id="app">
Object: {{ obj }}
<hr>
<template v-for="(item, key) in obj">
<button @click="delete obj[key]">Delete key {{ key }}</button>
</template>
<button @click="obj['z'] = 'Added'">Add key z</button>
</div>
<script src="https://unpkg.com/vue@next"></script> Комментарии:
1. Моя реализация немного … нестандартная … но я пытаюсь удалить определенный ключ / значение из объекта в хранилище vuex. Он удаляет просто отлично, но мои вычисленные чертежи из объекта не обновляются. Работает ли vuex по-другому, или я, вероятно, что-то испортил?
2. @RandyHall Vuex ничем не отличается. Вы даже можете удалить ключ без действия, и он все равно будет работать (но вам, вероятно, следует использовать действие). Вот та же демонстрация выше с использованием состояния Vuex и кнопок для удаления ключа с действием или без него: jsfiddle.net/sh0ber/5t4bpwks
3. @Dan спасибо за объяснение! Моя конкретная ошибка оказалась проблемой разработчика (меня), но это здорово знать