Vue3 子组件监听父组件传来异步数据的正确方式

最初想使用watch 配合着 computed 来监听父组件数据,发现没有必要反而造成代码冗余,如果参数一多很难维护。

正确方式:直接使用computed监听就好

js 复制代码
// 子组件
<script>
export default {
  props: {
    yesterDayfollow: {
      type: Array
    },
    transpond: {
      type: Array
    },
    cumulateUsers: {
      type: Array
    }
  },
  setup(props) {
    let yesterDayfollowRef = computed(() => props.yesterDayfollow.length) // 昨日关注
    let transpondRef = computed(() => props.transpond.length) // 昨日分享
    let cumulateUserRef = computed(
      () => props.cumulateUsers[0] && props.cumulateUsers[0].cumulate_user
    ) // 总用户数据

    return {
      yesterDayfollowRef,
      transpondRef,
      cumulateUserRef
    }
  }
}
</script>
  }
js 复制代码
// 获取昨日新增关注人数
getUserSummary(yesterDay, yesterDay).then((r) => {
  yesterDayfollow.value = r.list
})

// 获取图文分享转发数据
getUserShare(yesterDay, yesterDay).then((r) => {
  transpondRef.value = r.list
})

// 获取累计总用户数
getUserCumulate(yesterDay, yesterDay).then((r) => {
  cumulateUsers.value = r.list
})
相关推荐
菜鸟una13 分钟前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年41 分钟前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
我的div丢了肿么办2 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
武天2 小时前
一个项目有多个后端地址,每个后端地址的请求拦截器和响应拦截器都不一样,该怎么封装
vue.js
潜心编码3 小时前
基于vue的停车场管理系统
前端·javascript·vue.js
三小河3 小时前
React Vite 中动态批量导入路由
前端·vue.js
拉不动的猪4 小时前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
jason_yang4 小时前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
泉城老铁4 小时前
vue实现前端excel的导出
前端·vue.js
用户51681661458414 小时前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js