Vue 3 - Vue.delete 替代品

Posted 2023-02-22

【中文标题】Vue 3 - Vue.delete 替代品

【英文标题】：Vue 3 - Vue.delete alternative

【发布时间】：2021-05-24 00:30:46

【问题描述】：

Vue 3 的新 Reactivity API 中 Vue.delete 的替代品是什么？

【参考方案1】：

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

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

delete obj[key]

这是一个 Vue 3 演示，使用 vanilla 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>

【讨论】：

非常感谢！