zebraUI
zebraUI
  • 发布:2021-11-21 02:13
  • 更新:2021-11-21 02:13
  • 阅读:2575

一、组件开发兼容性测试之created,mounted,watch,computed执行顺序

分类:uni-app

写在前面:

在一个组件开发之前,我们通常会考虑其兼容性,尤其是像uniapp跨多端开发。很可能会出现不同平台执行顺序不一致的问题,这就导致了我们在某个品台会产生不一样的结果,甚至影响整个程序的执行。于是,我对多家不同的平台进行了常用的生命周期以及watch监听和computed计算属性的测试。 (电脑承受了莫大的压力)

本次测试我们在如下平台进行:

测试中我们将采用组件库常用开发模式的页面>parent>child,注意这里的parent和child是通过插槽注入页面的。测试模拟了常用的 check-box-group check-boxradio-box-group radio-boxtabstab等需要同时存在于页面的测试方法。这些大多出现于组件库。

<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 (和字节,飞书一致。这是个值得深思的问题。)。

测试告一段落,之后我们会测试获取$parent,$children的操作。

0 关注 分享

要回复文章请先登录注册