vue3+ts开发问题总结

一、proxy对象无法直接使用js解构

Proxy(Object) {uuid: '248ba102aea84cc6adf9a0b1e1e6ab83', img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4A…SJv9VdRLlJMpJlJNiWv4LpJy51YvfygYAAAAASUVORK5CYII='}

类似于上面的形式，对象为Proxy代码，则无法直接使用js进行解构。

解决方式：

可以使用 const data = Objec.assign(res)

之后就可以直接使用 const {uuid, img} = data 进行js解构了

二、const定义reactive响应式变量，再进行赋值报错

使用const定义reactive响应式变量后，在对这个变量赋值则会报错，需要声明为let类型的变量

const userList = reactive<UserPageVO[]>([])
const pageList = async () => {
  const res = await UserAPI.pageList(queryParams);
  const { data } = res
  console.log('----', data)
  userList = data.records
  // userList = data.records
  // UserAPI.pageList(queryParams).then(res => {
  //   console.log('===', res)
  //   const { data } = { res }
  // })
}
# 上面使用const关键字定义了userList;下面再使用userList = data.records在进行赋值，则会提示Cannot assign to 'userList' because it is a constant.
# 因此需要将上面const定义的变量 改成 let userList = reactive<UserPageVO[]>([]) 即可

# 另外可以将 const userList = reactive<UserPageVO[]>([]) 改成 const userList = ref<UserPageVO[]>([]) 之后再使用 userList.value 进行赋值时，不会报错

但使用 const 定义 ref 响应式变量，再进行赋值，则不会提示任何错误

三、关于async、await、promise的一些使用注意事项

我们在开发时，会发现当真正调用了后端接口时，必须等await调用的函数返回结果后，await后面的代码才会继续执行；当在前端模拟数据，没有真正调用后端接口时，会发现await后面的代码不会等到await返回结果，就会往下执行。主要原因见下表。