m***@163.com
m***@163.com
  • 发布:2023-07-09 19:39
  • 更新:2023-07-10 16:13
  • 阅读:197

【报Bug】飞书小程序Vue3.2.x+Vite4.x,模板中多重v-for绑定的事件函数被自动触发了

分类:uni-app

产品分类: uniapp/小程序

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.2.1

第三方开发者工具版本号: 3.0.1

基础库版本号: 1.9.95.0

项目创建方式: CLI

CLI版本号: 未知

操作步骤:

目前无最小化 demo,步骤如描述所述

预期结果:

绑定的函数都能够被正确的访问到,不出现混乱

实际结果:

事件函数访问出错

bug描述:

问题发现

1. 在模板上使用v-for实现了一些功能,并且绑定了事件函数

复制代码<view v-for="(list, index) of resultSkipList" :key="index" class="link-group">  
  <!-- (item.onLinkTarget, item.checkSeparated) -->  
  <view  
    v-for="(item, j) of list"  
    :key="j"  
    @tap.stop="() => onLink(item.onLinkTarget, item.checkSeparated)"  
  >  
    <image :src="item.iconSrc" />  
    <view>{{ item.title }}</view>  
    <view v-if="item.num !== undefined && item.num > 0" class="dot">  
      <view v-if="item.num <= 999"> {{ item.num }} </view>  
      <view v-else class="ellipsis-icon" />  
    </view>  
  </view>  
</view>  

resultSkipList 是一个 computed 数据,所以模板的内容会被持续修改

2. 进入页面后 onLink 居然被触发了!!!

问题分析

通过调试发现,onLink 被调用居然是强盗行为!本应该调用的是 updateLoading(另一个事件函数),但是请看下面的代码

  1. 事件绑定会在一开始将所有函数都调用一遍 vOn,此时所有事件的 name -> function 是确定的
  2. 但是随着我前面说的 computed 数据变更,出现了更多需要绑定的 onLink,那么原本的 updateLoading 这个函数的 name 就不是原本的 name 了
  3. updateLoading 被触发后他的 name 居然是旧的 name,所以访问到 ctx.$scope 的函数就不是想要访问的了,就变成了 onLink 了

方案思考

发现 vOn 函数内对 name 的生成有一些规则(如特判 weixin、qq),但是我发现 vOn 绑定的 key 是用不到了(不知道为什么),我觉得 vOn 的 key 应该就是 v-for 上绑定的 key,但是不知道为什么编译到飞书后就不会作为 key 传入 vOn

然后解决方式应该就是 key 需要传入并且再将特判生成 name 的代码加多一个 feishu???

2023-07-09 19:39 负责人:无 分享
已邀请:
m***@163.com

m***@163.com (作者)

跟进问题:发现有配置未适配,不知道为什么

  • @dcloudio/uni-mp-lark/dist/uni.compiler.js

有大大能帮我 check 一下么?顺便修复下?

连着上面 invoker 生成的 name 的逻辑加多一个 ctx.$mpPlatform === "mp-lark" 的改动,基本这个问题就解决了

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容