baidu / san

A fast, portable, flexible JavaScript component framework
https://baidu.github.io/san/
MIT License
4.73k stars 551 forks source link

在特定情况下created内的数据操作不生效 #735

Closed asd123freedom closed 1 year ago

asd123freedom commented 1 year ago

场景:根组件的根元素是另一个有slot的组件,在此slot里面嵌入另一个组件。 操作:在生命周期函数尝试更新数据。 结论:this.data.set写在created无效,在inited和attached里面都有效

复现demo地址:https://codesandbox.io/s/jovial-gianmarco-ur0tty

示例代码截图:

97cfba73915adae2d9b3406be26f1c8f
zhengmz commented 1 year ago

这个可能是因为 rawData 是一个 Object,所以 created 中应该使用以下语句

this.data.set("rawData.title", "created title");
errorrik commented 1 year ago

created 意味着在创建过程中,语义是创建视图节点了。这时候数据变化,需要对生成的视图结构重新生成,是不合理的,会带来其他问题。

建议在 inited 中初始化数据。

其实,Page 组件不是用 c-person,而是用 div 当 root element,可以解决这个问题。这个涉及到视图初始化过程对于不同节点的创建顺序,不展开了。

还是建议在 inited 中初始化数据。