vue3的一些小技巧

if(res?.data.length) 1.首先检查res是否存在(即不是null或undefined) 2.如果res存在，那么继续访问res.data 3.如果res.data也存在，那么最后访问res.data.length并获取其值 4.如果在任何一部中属性不存在(即为null或undefined),那么整个表达式的结果立即为undefined，并且不会抛出错误。 在if语句中使用这个表达式时，它的行为如下： 如果res?.data.length的结果是真值(在js中，除了false、0、“”(空字符串)、null、undefined和NaN之外的所有值都被视为真值)，那么if语句内的代码块将被执行 如果res?.data.length的结果是假值(特别是如果由于可选链中的任何一环为null或undefined而导致整个表达式结果为undefined，或者res.data.length本身为0)，那么if语句代码块将不会执行。

searchFormRef.value.validate() 1.searchFormRef： 这是一个引用(ref) 变量，通常通过ref函数创建，用于在Vue的Composition API中存储响应式数据。 2.value 使用ref函数创建一个响应式引用时，访问或修改这个引用的值需要使用.value属性。因此，searchFormRef.value表示访问searchFormRef引用所持有的实际值 3.validate()方法通常是在表单实例上调用，用于触发表单的验证逻辑。检查表单中的所有字段是否符合定义的验证规则。所有字段都通过验证，这个方法通常会返回true；如果有字段验证失败，它可能会返回false或者一个包含验证错误信息的对象

//定义好的hooks vueuse/core 是一个强大的Vue组合式API工具库，它提供了一系列使用函数来简化和增强Vue3应用中的状态管理、副作用处理等功能。 安装npm install @vueuse/core 引入和使用 //按需引入 import { ref,computed } from 'vue' import { useMouse,useWindowSize } from '@vueuse/core'

const mouse = useMouse(); const windowSize = useWindowSize(); const mousePosition = computed(( ) => （${mouse.x},${mouse.y}）)

常用函数示例 用于追踪鼠标位置。 import { useMouse } from '@vueuse/core' export default { setup( ){ const mouse = useMouse( ); return { mouse}; } } 用于追踪窗口大小 import { useWindowSize } from '@vueuse/core'

export default { setup( ){ const windowSize = useWindowSize( ); return { windowSize } } }

3.useDebouncedRef 用于创建一个防抖动的响应式引用。 import { useDebouncedRef } from '@vueuse/core'

export default { setup( ){ const searchQuery = useDebouncedRef(' ',300)

 //每次searchQuery.value变化时，这个回调会在300ms后执行
  watch(searchQuery.value,(newValue) =>{
           console.log('Debounced search query:', newValue)
 })


   return { searchQuery }

} }

4.useLocalStorage import { useLocalStorage } from '@vueuse/core'

export default { setup( ){ const theme = useLocalStorage('theme', 'light') //切换主题 theme.value = theme.value === 'light' ? 'dark' : 'light' }

return { theme, toggleTheme };

}