写在前面:
在一个组件开发之前,我们通常会考虑其兼容性,尤其是像uniapp跨多端开发。很可能会出现不同平台执行顺序不一致的问题,这就导致了我们在某个品台会产生不一样的结果,甚至影响整个程序的执行。于是,我对多家不同的平台进行了常用的生命周期以及watch监听和computed计算属性的测试。 (电脑承受了莫大的压力)
本次测试我们在如下平台进行:
测试中我们将采用组件库常用开发模式的页面>parent>child,注意这里的parent和child是通过插槽注入页面的。测试模拟了常用的 check-box-group
check-box
,radio-box-group
radio-box
,tabs
,tab
等需要同时存在于页面的测试方法。这些大多出现于组件库。
<test-one>
<test-two></test-two>
</test-one>
以下是测试结果:
H5:
微信小程序
百度小程序
支付宝小程序
字节小程序
QQ小程序
快手小程序
(不支持个人,暂时略过)
飞书小程序
快应用
总结:
我们在页面和组件中都有四个console,分别是created,mounted,watch(第一次就监听),computed
各平台执行顺序如下:
h5::
页面-computed > 页面-watch > 页面-created > one-computed > one-watch > one-created > two-computed > two-watch > two-created > two-mounted > one-mounted > 页面-mounted
微信小程序:
页面-computed > 页面-watch > 页面-created > one-computed > one-watch > one-created > two-computed > two-watch > two-created > one-mounted > two-mounted > 页面-mounted (与h5不同的仅仅是one的mounted和two的mounted的执行顺序不同)
百度小程序:
页面-computed > 页面-watch > 页面-created > one-computed > one-watch > one-created > one-mounted > two-computed > two-watch > two-created > two-mounted > 页面-mounted (与h5,微信不同的是,百度小程序的组件会完全根据顺序执行所有的,而h5,微信无论页面还是组件,mounted始终会最后执行)
支付宝小程序:
页面-computed > 页面-watch > 页面-created > one-computed > one-watch > one-created > two-computed > two-watch > two-created > two-mounted > one-mounted > 页面-mounted (竟然和h5完全一致,点赞!!!)
字节小程序 (不测不知道,一测吓一跳。我说之前checkbox,radio,tab...怎么老是字节有问题!!!)
页面-computed > 页面-watch > one-computed > one-watch > two-computed > two-watch > 页面-created > 页面-mounted > one-created > one-mounted > two-created > two-mounted (可以看到,字节的执行顺序与其他小程序的差异性十分大,完全是按照 computed > watch > created > mounted顺序执行,而无视了组件和页面层级。)
QQ小程序
页面-computed > 页面-watch > 页面-created > one-computed > one-watch > one-created > two-computed > two-watch > two-created > one-mounted > two-mounted > 页面-mounted (不愧是腾讯,QQ的执行顺序与微信完全一样)
快手小程序
(不支持个人,暂时略过)
飞书小程序
页面-computed > 页面-watch > one-computed > one-watch > two-computed > two-watch > 页面-created > 页面-mounted > one-created > one-mounted > two-created > two-mounted (好吧,和字节小程序的完全一样。。。)
快应用
页面-computed > 页面-watch > one-computed > one-watch > two-computed > two-watch > 页面-created > 页面-mounted > one-created > one-mounted > two-created > two-mounted (和字节,飞书一致。这是个值得深思的问题。)。