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
})
相关推荐
晨枫阳12 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技14 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte14 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin14 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击14 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder15 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202616 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737416 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星17 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin17 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序