前端康复训练

上传并修改图片（适用于头像

https://github.com/dai-siki/vue-image-crop-upload?tab=readme-ov-file

修改头像，效果如下

商品上传界面

计算属性和ref

ref是页面和数据绑定的那种意思

computed则是某个数据可以根据依赖的ref数据进行改变

ref和reactive

在 Vue 3 的 Composition API 中，reactive 创建的响应式对象的属性可以直接访问，不需要 .value。

例如，如果你有一个 reactive 创建的响应式对象 submitGoodsForm：

const submitGoodsForm = reactive({
  name: "",
  price: "",
  goodsLevel: "",
  dscrip: "",
  userId: "",
  goodsId: "",
})

你可以直接访问它的 name 属性，如 submitGoodsForm.name，不需要使用 submitGoodsForm.name.value。

然而，如果你使用 ref 创建响应式引用，那么你需要使用 .value 来访问或修改它的值。例如：

const count = ref(0)
console.log(count.value)  // 输出 0
count.value = 1  // 修改 count 的值为 1

所以，是否需要使用 .value 取决于你是使用 reactive 还是 ref 创建的响应式数据。

安装模块

npm i --save-dev @types/vuelidate和之前的npm install vuelidate --save命令是有区别的。

npm install vuelidate --save：这个命令是用来安装vuelidate库的，这是一个Vue.js的表单验证库。--save选项会将vuelidate添加到你的项目的package.json文件的dependencies中。
npm i --save-dev @types/vuelidate：这个命令是用来安装@types/vuelidate的，这是一个为vuelidate库提供TypeScript类型定义的第三方库。--save-dev选项会将@types/vuelidate添加到你的项目的package.json文件的devDependencies中，这意味着这个库只在开发环境中需要，而在生产环境中不需要。

然而，我需要指出的是，@types/vuelidate可能并不存在。@types库是由社区提供的，用于为没有提供TypeScript类型定义的JavaScript库提供类型定义。并不是所有的JavaScript库都有对应的@types库。如果@types/vuelidate不存在，你可能需要自己为vuelidate库编写类型定义，或者在你的代码中使用JavaScript而不是TypeScript。

后者有用，不知道为啥，可能是因为用的ts?

表单验证

https://github.com/vuelidate/vuelidate/tree/next

异步函数

在 TypeScript（以及现代 JavaScript）中，let 和 const 是用于声明变量的关键字，它们都提供了块级作用域（block scope），这是与传统的 var 关键字（提供函数级作用域或全局作用域）的主要区别。以下是 let 和 const 的区别：

let: 使用 let 声明的变量可以在声明之后重新赋值。这意味着变量的值是可以改变的。
const: 使用 const 声明的是常量，一旦赋值后就不能再改变。尝试重新赋值 const 声明的变量将导致一个错误。注意，对于对象或数组，const 确保变量标识符不能重新赋值指向另一个引用，但对象或数组的内容仍然可以被修改。

关于异步函数，如果 uploadPhoto 函数是 async 的，这意味着它会返回一个 Promise。当你调用这个函数时，你可以使用 await 关键字来等待 Promise 完成，或者使用 .then() 和 .catch() 方法来处理完成（或拒绝）的 Promise。

这里有一个例子：

async function uploadPhoto(file: File): Promise<any> {
  // 异步操作，例如上传文件
}

// 使用 await
async function handleUpload() {
  try {
    const result = await uploadPhoto(someFile);
    // 在这里处理 result
  } catch (error) {
    // 处理错误
  }
}

// 或者使用 .then() 和 .catch()
uploadPhoto(someFile)
  .then(result => {
    // 在这里处理 result
  })
  .catch(error => {
    // 处理错误
  });

如果函数是 async 的，你必须理解其返回值将总是一个 Promise，并且你需要相应地处理这个 Promise。例如，如果你在一个非异步函数中调用 uploadPhoto 并尝试直接访问返回值，你将得到一个 Promise 对象，而不是 uploadPhoto 操作完成后的结果。这就是为什么通常在调用 async 函数时使用 await 关键字，或者使用 .then() 和 .catch() 方法来处理异步结果。

ChrisDing's bblog