source

Vue 3 - 대체 Vue.delete

gigabyte 2022. 7. 23. 13:57
반응형

Vue 3 - 대체 Vue.delete

Vue 3의 새로운 Reactivity API의 대안은 무엇입니까?

Vue.delete그리고.Vue.setVue 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>

언급URL : https://stackoverflow.com/questions/66304282/vue-3-vue-delete-alternative

반응형