reactive包装数组

内容：

reactive是一个函数，用来将普通对象/数组包装成响应式数据使用。

实列

 

<template>
  <ul>
    <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">
      {{ item }}
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'App',
    setup() {
      const arr = ['a', 'b', 'c']
      const removeItem = (index) => {
        arr.splice(index, 1)
      }
      return {
        arr,
        removeItem
      }
    }
  }
</script>

数据缺失是删除了，但是试图没更新，不是响应式的！

所以可以用reactive包装数组

<template>
  <ul>
    <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">
      {{ item }}
    </li>
  </ul>
</template>

<script>
  import { reactive } from 'vue'
  export default {
    name: 'App',
    setup() {
      const arr = reactive(['a', 'b', 'c'])
      const removeItem = (index) => {
        arr.splice(index, 1)
      }
      return {
        arr,
        removeItem
      }
    }
  }
</script>