“代驾”小程序&查漏补缺

vue3&part

watch

官方文档:https://cn.vuejs.org/api/reactivity-core.html#watch

功能:侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。

javascript 复制代码
watch(
  () => tabName.value,
  (val) => {
    appType.value = tabsList.value[val]?.id
    paging.value.reload()
  },
)

watchEffect

官方文档:https://cn.vuejs.org/api/reactivity-core.html#watch

功能:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。

学到这里的时候,在会去复习一下vue3的md文档(名字叫vue3快速上手)

computed

官方文档:响应式 API:核心 | Vue.js

功能:接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 getset 函数的对象来创建一个可写的 ref 对象。

javascript 复制代码
// 计算选中单品列表
const selectedCartList = computed(() => {
  return cartList.value.filter((v) => v.selected)
})

// 计算选中总件数
const selectedCartListCount = computed(() => {
  return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
})

// 计算选中总金额
const selectedCartListMoney = computed(() => {
  return selectedCartList.value
    .reduce((sum, item) => sum + item.count * item.nowPrice, 0)
    .toFixed(2)
})

store

官方文档:定义 Store | Pinia

功能:Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。

javascript 复制代码
import { defineStore } from "pinia"
import { ref } from "vue"

export const useUserStore = defineStore(
  "user",  //第一个参数 这个字符串 "user" 是 store 的唯一标识符(ID)。在 Pinia 中,每个 store 必须具有唯一的 ID,以便在应用中区分不同的 store。
  () => {   //第二个参数 store 的状态和方法
    const userInfo = ref<Partial<IUserInfo> | null>()

    const setUserInfo = (val: IUserInfo) => {
      userInfo.value = val
    }

    const clearUserInfo = () => {
      userInfo.value = null
    }
    // 一般没有reset需求,不需要的可以删除
    const reset = () => {
      userInfo.value = null
    }
    const isLogined = computed(() => !!userInfo.value?.jwt)

    return {
      userInfo,
      setUserInfo,
      clearUserInfo,
      isLogined,
      reset,
    }
  },
  { //第三个参数 store 的配置选项
    persist: true,
// 用来配置是否将 store 的状态持久化到浏览器的 localStorage 或 sessionStorage
  },
)

Loash

官方文档:Lodash 简介 | Lodash中文文档 | Lodash中文网

防抖

官方文档:lodash.debounce | Lodash中文文档 | Lodash中文网

javascript 复制代码
// 记得引入
import _ from "lodash"
// 使用 debounce 包装 getQuestion
const debouncedGetQuestion = _.debounce((value) => getQuestion(value), 300)
// 输入
const onChange = ({ value }) => {
  isQuestion.value = true
  value = value.trim()
  if (!value) {
    onClear()
    return
  }
  debouncedGetQuestion(value) // 使用封装后的函数
}
// 查询
const onSearch = ({ value }) => {
  isQuestion.value = true
  value = value.trim()
  if (!value) {
    onClear()
    keyword.value = ""
    return
  }
  debouncedGetQuestion(value) // 使用封装后的函数
}

节流

官方文档:lodash.throttle | Lodash中文文档 | Lodash中文网

uniapp的生命周期

官方文档:App.vue/App.uvue | uni-app官网

http&接口请求方法

javascript 复制代码
// 分页查询常见问题列表
export const postQuestionList = (pageNum, pageSize, data) => {
  return http.post<questionListItem>(`/biz/question/questionList/${pageNum}/${pageSize}`, data)
}
相关推荐
杉之1 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端1 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡1 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木2 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!3 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷3 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机4 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪4 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪4 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
snowfoootball5 小时前
基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案
前端·人工智能·后端·python·深度学习·高考