vue3项目技巧

1.使用toRaw 实现深拷贝效果

html　
　<p>名称：<input v-model="fromdata.name" type="text"></p>
    <p>金额：<input v-model="fromdata.money" type="text">元</p>
    <button @click="submit">提交</button>

js
let fromdata = reactive({
    name:'',
    money:0
})
const submit = ()=>{
    // 深拷贝的实现
// let data = JSON.parse(JSON.stringify(fromdata))
let data = toRaw(fromdata)
data.money = data.money*100
console.log(data);


}

在vue3开发中异步请求的图形验证如果返回值是对象形式，不建议使用reactive，因为异步加载后无法对对象内数据进行相应需要将其通过torefs进行转化 建议直接使用ref

const getCode = async () => { let res =await GetCode() console.log(res.data); codeimg.value=res.data }

第三：在开发table表格中如果使用作用域插槽的方式进行弹窗添加，容易出现状态控制的问题

这个问题的原因就是使用了同一个状态，解决办法就是 将 visible 状态绑定到 scope.row.visible，确保每个 el-popover 有独立的状态管理

解决后

4.当tabel中的值发生变化后列表后重新渲染导致折叠收起
原因：这是因为 el-table 的默认行为是当表格内容发生变化时，会重新渲染表格，导致展开的行折叠。
解决：为 el-table 添加 row-key 属性，确保每一行有唯一的标识。这样可以避免表格重新渲染时丢失展开状态。