vue3的增删改查

• 实现深拷贝的两种方法

        arr.push(JSON.parse(JSON.stringify(obj)))
           arr.push({...obj})

• 添加和修改的时候 是浅拷贝 改变表单里面的值 对其他的值都变化，所以是需要深拷贝

<template>
  <div>
    <span v-text="'姓名：'"></span><input type="text" v-model="obj.name" />
  </div>
  <div>
    <span v-text="'年龄： '"></span><input type="text" v-model="obj.age" />
  </div>
  <div>
    <span v-text="'个人描述： '"></span><input type="text" v-model="obj.dec" />
  </div>
  <button @click="add()">添加</button>
  <hr />
  <div>
    <input
      type="text"
      placeholder="请输入信息"
      v-model="query"
      @input="queryfn"
    />
  </div>
  <table border="1">
    <tr>
      <th>姓名：</th>
      <th>年龄：</th>
      <th>个人描述：</th>
      <th>操作：</th>
    </tr>
    <tr v-for="(v, i) in arr" :key="i">
      <td>{{ v.name }}</td>
      <td>{{ v.age }}</td>
      <td>{{ v.dec }}</td>
      <td>
        <button @click="del(i)">删除</button>
        <button @click="updatas(v, i)">修改</button>
      </td>
    </tr>
  </table>
  <fieldset v-if="flag">
    <legend>修改用户弹框</legend>
    <div>
      <span v-text="'姓名：'"></span><input type="text" v-model="updata.name" />
    </div>
    <div>
      <span v-text="'年龄： '"></span><input type="text" v-model="updata.age" />
    </div>
    <div>
      <span v-text="'个人描述： '"></span
      ><input type="text" v-model="updata.dec" />
      <button @click="save">保存</button>
      <button @click="close">关闭</button>
    </div>
  </fieldset>
</template>
<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    // 修改
    const updata = reactive({
      name: "",
      age: "",
      dec: "",
    });
    let flag = ref(false);
    let index = ref(null);
    const updatas = (v, i) => {
      flag.value = true;
      updata.name = v.name;
      updata.age = v.age;
      updata.dec = v.dec;
      index.value = i;
    };

    const save = () => {
      arr.value.splice(index.value, 1, { ...updata });
    };
    const close = () => {
      flag.value = false;
    };

    //shallowReactive 只是针对对象的第一层数据，再往下就不能实现数据的双向数据绑定了
    //优点：可以减少性能消耗 (如果只想针对第一层双向数据绑定，就使用shallowReactive)
    // let arr = reactive([]);
    // 查询
    let query = ref("");
    const queryfn = () => {
      if (query.value.trim() == "") return;
      let narr = arr.value.filter((r) => r.name == query.value);
      console.log(narr);
      arr.value = narr;
    };
    let arr = ref([
      {
        name: "张",
        age: "3",
        dec: "333",
      },
      {
        name: "李四",
        age: "3",
        dec: "333",
      },
      {
        name: "王五",
        age: "3",
        dec: "333",
      },
    ]);
    // 数组复制不能实现响应式的第一种解决方案
    // reactive建议包裹对象 直接使用数组赋值 不会具有响应式
    // 新增
    const obj = reactive({
      name: "",
      age: "",
      dec: "",
    });

    const add = () => {
      if (
        obj.name.trim() == "" ||
        obj.age.trim() == "" ||
        obj.dec.trim() == ""
      ) {
        console.log("缺少");
        return;
      }
      //实现深拷贝的两种方法
      // arr.push(JSON.parse(JSON.stringify(obj)))
      // arr.push({...obj})
      /* 和上面拓展运算符的写法 画等于号 */
      arr.value.push({
        name: obj.name,
        age: obj.age,
        dec: obj.dec,
      });
      //  obj.name=''
      // obj.age=''
      // obj.dec=''
      /* 和上面手动置空的方法 画等于号 */
      for (var key in obj) {
        obj[key] = "";
      }
    };
    // const del= (i)=>{
    //   arr.splice(i,1)
    // }
    function del(i) {
      arr.value.splice(i, 1);
    }

    //watchEffect一进入页面就会执行一次
    //watchEffect 的回调函数中的响应式数据只要发生了改变，回调函数都会执行一遍
    // watchEffect(() => {
    //   let v = obj.name;
    //   console.log(v);
    // });

    /* 如果想单独使用对象上的属性 不能直接赋值 因为这样会失去和对象双向数据绑定关系 怎么解决？ */
    //使用toRef （对象，'字符串属性名'）包裹一下，才可以建立和对象之间的联系

    //如果涉及多个属性，可以使用toRefs  再return{}中使用 ...toRefs的方式 把属性解构出来即可

    // console.log("--setup--");
    // //vue3 挂载前
    // onBeforeMount(() => {
    //   console.log("--onBeforeMount--");
    // });
    // //vue3 挂载后
    // onMounted(() => {
    //   console.log("--onMounted--");
    // });
    // //vue3 更新前
    // onBeforeUpdate(() => {
    //   console.log("--onBeforeUpdate--");
    // });
    // onUpdated(() => {
    //   console.log("--onUpdated--");
    // });

    return {
      arr,
      add,
      obj,
      del,
      query,
      queryfn,
      updatas,
      flag,
      updata,
      save,
      close,
      // name: toRef(obj,"name"),
      // age: toRef(obj,'age')
      // flag,
    };
  },
};
</script>
<style>
</style>