收藏
回答

自定义组件初始化时因为默认值不同导致 prop 的 observer 被调用

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 工具 v1.02.1809260 2.3.0

- 当前 Bug 的表现(可附上截图)


在自定义组件 Component 的 properties 中定义 prop 的缺省值以及 observer 函数。


当使用该组件需要初始化该组件时,若 prop 接收外部传入的实参与该 prop 的默认值不相等时,会导致 observer 被立即调用一次。


- 预期表现


prop 的缺省值应该是组件未接收到外部传参时,使用的缺省值作为默认值,这属于组件初始化工作,不应该视为 prop 发生了变化。


所以当组件初始化时,如果 prop 接收的外部传参与缺省值不相等时,不触发 observer 调用是不是更合理一点?


- 提供一个最简复现 Demo


代码片段:wechatide://minicode/8SCwknmx7D3z


回答关注问题邀请回答
收藏

2 个回答

  • LastLeaf
    LastLeaf
    2018-10-23

    设计如此。这里的用意是,只要任何属性值与组件自身设定的初始值不同,observer 就一定会触发。


    设计上的原因是,有时很难界定你在问题中所说的“初始化”阶段。组件的属性值可能因为父组件传参变化,而父组件的传参又可能因为它的父组件传参而发生变化,而且这种变化可能发生在任何时候,比如组件被插入到父节点的时候,可能发生的事情包括触发 attached 、触发 relation linked 等,而这些又可能会有连锁的反应。很难划线说哪个点之前算“初始化”。


    目前这种设计的好处是,如果有其他 data 字段随着这个属性变化,可以轻易处理。之后我们也会继续沿着这个方向来扩展。

    2018-10-23
    有用
    回复 3
    • 2018-10-23

      感谢你的回复,这种设计固然有它方便之处,但它的缺陷也很显而易见,组件没有动态设置初始值的能力。


      假设考虑一下以下场景,某组件的 prop 属性 male 是一个 Boolean 类型,true 表示男,false 表示女,另外有一个 observer,需要观察 male 的变化:


      • true 变 false 时,播放一个由男变女的动画。

      • false 变 true 时,播放一个由女变男的动画。


      假定 male 缺省值为 true,该组件应用在一个用户信息编辑页面,那所有女性用户进入该编辑的页面都会触发男变女动画,而所有男性用户进入编辑页面则没有任何动画。


      该场景下,产品的设计需求应该是所有用户进入编辑页面时,不要播放任何动画,当用户进行性别选择后,才播放相应的动画。


      诚然这只是我假设的一种应用场景,当然开发者也可以利用技巧规避错误播放动画。但通过这一场景,我想说明的重点是,不是所有组件的初始值都能够在定义组件时就被确定,开发者在 prop 中定义的 value 应是属性初始值的缺省值,当组件没有从外部接收到 prop 的初始值时,则使用开发者定义的缺省值作为初始值,否则以外部传入的值作为属性初始值。



      2018-10-23
      回复
    • LastLeaf
      LastLeaf
      2018-10-23回复

      这个设计确实有时不是很方便,这里只是追求一种相对的可控。因为在 WXML 属性层层传递和各种动态影响过程中,如果取父节点传递下来的值作为“初始值”,有时难以判定和控制初始值究竟是什么。


      而且作为基础特性,多提供代码执行时机总是比少提供时机要好一些。


      像你面对的这个问题,我能够想到的方法有两种:


      1. 进行动画判定的时候,检测组件的 attached 是不是已经触发,如果否,就不执行动画(这是一种很实用的方法,但其实不太符合自定义组件的设计哲学,即“数据应该反映组件的状态”);

      2. 属性有三个状态 “initial” “male” “female” ,“initial” 变为其他状态的时候,不触发动画。


      2018-10-23
      1
      回复
    • 2018-10-23回复LastLeaf

      以上示例是我推演出来的假设场景,之所以举例 Boolean 类型的 prop,是因为这种类型的属性最容易体现这种设计的风险。


      组件是当前数据的表现层,但数据不仅仅是变量,更是一种矢量。


      感谢你回复让我更好地了解你们的设计哲学,这对我是很有助益的。

      2018-10-23
      回复
  • Hasaki
    Hasaki
    2018-10-25

    OK!

    2018-10-25
    有用
    回复 1
    • Hasaki
      Hasaki
      2018-10-25

      。。。

      2018-10-25
      回复
登录 后发表内容