Vue 3 - Vue.delete 备选方案

Question

在 Vue 3 的新 Reactivity API 中，Vue.delete 的替代方案是什么？

Answer 1

Vue.delete 和 Vue.set 在 Vue 3 中不需要。使用代理的新反应系统，Vue 能够检测反应数据的所有变化。

您可以使用 JavaScript 的 delete 运算符：

delete obj[key]

这是一个使用 vanilla JavaScript 删除和添加对象属性的 Vue 3 演示：

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>

Vue 3 - Vue.delete 备选方案

Vue 3 - Vue.delete alternative

vue.js

vuejs2

vue-component

vuejs3

vue-reactivity