vue3中完成增删查改后数据实现响应式

Vue3中可以使用reactive函数实现响应式数据。具体步骤如下：

1. 引入reactive函数

import { reactive } from 'vue'

2. 定义初始数据

const state = reactive({
  list: [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
  ],
  currentItem: null,
})

3. 实现增加数据

const addItem = (name) => {
  const id = state.list.length + 1
  state.list.push({ id, name })
}

4. 实现删除数据

const removeItem = (id) => {
  const index = state.list.findIndex((item) => item.id === id)
  if (index !== -1) {
    state.list.splice(index, 1)
  }
}

5. 实现修改数据

const editItem = (id, name) => {
  const index = state.list.findIndex((item) => item.id === id)
  if (index !== -1) {
    state.list[index].name = name
  }
}

6. 实现查询数据

const setCurrentItem = (id) => {
  state.currentItem = state.list.find((item) => item.id === id)
}

7. 在模板中使用响应式数据

<ul>
  <li v-for="item in state.list" :key="item.id">
    {{ item.name }}
    <button @click="removeItem(item.id)">删除</button>
    <button @click="setCurrentItem(item.id)">编辑</button>
  </li>
</ul>

以上就是Vue3中完成增删查改后数据实现响应式的步骤。