《黑天鹅》笔记
《对赌:信息不住时如何做出高明决策》笔记
鸡汤反思——关于随意
《如何阅读一本书》读书笔记
记杭州一处高低床青年旅舍
租房押金讨要记(2020年底-2021夏季)
巫师3的任务是如何自然引出的
交水费的波折于2024年
最喜欢的
几次睡觉做梦的内容

vue中多异步属性和数据存在依赖关系时的处理

场景

父组件A,子组件B,A组件内调两个接口,两个接口结果作为两个prop传给组件B。

组件B内部存在两个data值a和b,是使用前面两个prop通过计算生成的。在模版渲染时需要使用计算完成的a和b。

a的生成又依赖b。

结论

a和b作为组件内部数据,应该是根据prop的变化而变化,所以只能watch对应的prop,或者使用compute

使用compute的话,模版初次渲染时就会有多个方法在使用a和b,从而报错,改动麻烦,而且这个场景更贴合watch

使用watch immediate能在beforeCreate之前就执行watch回调,使得模版渲染不会报错,问题只在于a和b存在依赖关系

此处前端场景(假如a依赖b),解决方法,1)watch b执行后立刻执行a,watch a执行时判断b如果为空则退出执行;2)watch a执行时若b没有执行就先执行b,watch b则不做修改。两种皆可,条件在于哪一个操作具有幂等性,这里两个都可以多次执行故而都可行。

过程

  • watch的执行顺序问题(顺序好像是按代码前后顺序,不过最好不去指望顺序,依赖的处理就让b出结果再执行一遍a)
  • 以及compute替代watch的话,执行顺序如何(先无论immediate的watch,再computed)
  • prop默认空值,再设置值之后,是否子组件优先触发compute而不是watch(先watch)
  • 父组件里created调接口,给子组件prop赋值,子组件created里接收到的值有时为空,这个顺序究竟如何(如果接口赶在mount挂载子组件之前返回,则子组件第一个接收到prop就有新值,否则为默认值,并在接口返回后再修改prop,触发watch和compute)
  • 类似于消息执行顺序问题,a和b执行顺序不定,a依赖b的结果,解决办法只有1)执行完b就执行a,若a没准备好,则让a准备好了再发消息再次触发a;2)执行a时判断b没有执行就去想办法等b执行了再次进行a
  • 此处前端场景,解决方法1)watch b执行后立刻执行a,watch a执行时判断b有没有执行过;2)watch a执行时若b没有执行就先执行b,watch b不做处理。两种皆可,条件在于哪一个操作具有幂等性,这里两个都可以多次执行故而都可行。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注