不如摸鱼去
不如摸鱼去
  • 发布:2023-03-22 17:51
  • 更新:2023-12-11 20:18
  • 阅读:597

【报Bug】vue3+vite + script setup 编译到支付宝或者钉钉小程序会将'-'连接的ref名称转成两个变量

分类:uni-app

产品分类: uniapp/小程序/阿里

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11专业版 22621.1413

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

基础库版本号: 2.0

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-3070720230316001

示例代码:
  <hd-toast ref="hd-toast"></hd-toast>  

报错
···
(index):1 ReferenceError: hd is not defined
at a (Home.js:322:1)
at setRef (vendor.js:7134:1)
at Object.handleRef [as __r] (vendor.js:7117:1)
at e.invokePublicMethod (VM60 af-appx.worker.min.js:6:160145)
at e.onComponentRefBind (VM60 af-appx.worker.min.js:6:169365)
at VM60 af-appx.worker.min.js:6:272424
at e.performLifecycle (VM60 af-appx.worker.min.js:6:272530)
at e.performRunloop (VM60 af-appx.worker.min.js:6:272599)
at e.onMount (VM60 af-appx.worker.min.js:6:255017)
at e.bootstrap (VM60 af-appx.worker.min.js:6:159291)
···

编译后代码

return (_ctx, _cache) => {  
      return {  
        a: () => ({  
          r: hd - toast  
        }),  
        b: common_vendor.t(common_vendor.unref(version2)),  
        c: common_vendor.f(cmpList, (cmp, index, i0) => {  
          return {  
            a: cmp.icon,  
            b: common_vendor.t(cmp.name),  
            c: index,  
            d: common_vendor.o(($event) => doCmpClick(cmp))  
          };  
        }),  
        d: common_vendor.o(doCloseCmp),  
        e: common_vendor.o(doCmpRedirct),  
        f: common_vendor.p({  
          cmp: selectedCmp.value  
        }),  
        g: () => ({  
          r: cmppop,  
          k: "cmppop"  
        }),  
        h: common_vendor.p({  
          type: "bottom",  
          maskClick: true  
        })  
      };  
    };

操作步骤:
<template>  
  <view class="home">  
    <hd-toast ref="hd-toast"></hd-toast>  
  </view>  
</template>  

<script lang="ts" setup>  

const { proxy } = getCurrentInstance() as any  
onMounted(() => {  
  console.log(proxy.$refs)  
})  
</script>  
<style lang="scss" scoped>  
</style>

预期结果:

正常渲染

实际结果:

报错
···
(index):1 ReferenceError: hd is not defined
at a (Home.js:322:1)
at setRef (vendor.js:7134:1)
at Object.handleRef [as __r] (vendor.js:7117:1)
at e.invokePublicMethod (VM60 af-appx.worker.min.js:6:160145)
at e.onComponentRefBind (VM60 af-appx.worker.min.js:6:169365)
at VM60 af-appx.worker.min.js:6:272424
at e.performLifecycle (VM60 af-appx.worker.min.js:6:272530)
at e.performRunloop (VM60 af-appx.worker.min.js:6:272599)
at e.onMount (VM60 af-appx.worker.min.js:6:255017)
at e.bootstrap (VM60 af-appx.worker.min.js:6:159291)
···

bug描述:

vue3+vite + script setup 编译到支付宝或者钉钉小程序会将'-'连接的ref名称转成两个变量

2023-03-22 17:51 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

感谢反馈。你反馈的第一个问题是组件 ref 名称,如果携带 - 短横线符号,在 vue3 的微信和支付宝运行结果不同,微信是对的。 后续补充支付宝小程序 ref 也打印不出来。

经过验证,正常定义不带短横线的 ref 不会产生问题。

uniapp 不能保证非官方鼓励的写法一一做兼容,我让相关同事看一下。

ref 引用模版携带短横线,这种写法并不值得推荐,官方文档要求这样使用

 <SubComp ref="subComp"></SubComp>  
const subComp = ref();  
const tapSayHi = () => {  
  subComp.value?.sayHi();  
};

vue3 的 ref 定义子组件的引用,官方在文档中鼓励使用通过 ref() 进行定义,定义变量时候携带短横线会产生误会,变量和引用不一致。你提到通过 getCurrentInstance 访问内部 refs,这个是不鼓励的,为了保证项目健壮和可维护性,应当逐步放弃这种写法。

官方文档 https://cn.vuejs.org/guide/essentials/template-refs.html#template-refs
为什么不鼓励使用 getCurrentInstance https://github.com/vuejs/docs/issues/1422#issuecomment-1032120675

不如摸鱼去

不如摸鱼去 (作者) - 一个前端打工仔。如果我的回答对你产生了帮助,还请给个star: https://github.com/Moonofweisheng

附带还有一个问题 在支付宝中 setup+ts +vite,按照如下写法获取$refs,console.log(proxy.$refs) 出来是没有值的

<template>    
  <view class="home">    
    <hd-toast ref="hd-toast"></hd-toast>    
  </view>    
</template>    

<script lang="ts" setup>    

const { proxy } = getCurrentInstance() as any    
onMounted(() => {    
  console.log(proxy.$refs)    
})    
</script>    
<style lang="scss" scoped>    
</style>
不如摸鱼去

不如摸鱼去 (作者) - 一个前端打工仔。如果我的回答对你产生了帮助,还请给个star: https://github.com/Moonofweisheng

编译到微信小程序是这样的,可以正常运行

    return (_ctx, _cache) => {  
      return {  
        a: common_vendor.sr("hd-toast", "bd9bb22b-0"),  
        b: common_vendor.t(common_vendor.unref(version2)),  
        c: common_vendor.f(cmpList, (cmp, index, i0) => {  
          return {  
            a: cmp.icon,  
            b: common_vendor.t(cmp.name),  
            c: index,  
            d: common_vendor.o(($event) => doCmpClick(cmp), index)  
          };  
        }),  
        d: common_vendor.o(doCloseCmp),  
        e: common_vendor.o(doCmpRedirct),  
        f: common_vendor.p({  
          cmp: selectedCmp.value  
        }),  
        g: common_vendor.sr(cmppop, "bd9bb22b-1", {  
          "k": "cmppop"  
        }),  
        h: common_vendor.p({  
          type: "bottom",  
          maskClick: true  
        })  
      };  
    };

其中 a: common_vendor.sr("hd-toast", "bd9bb22b-0") 这一段是正常按照字符串来的"hd-toast"
而编译到支付宝则是

      a: () => ({    
          r: hd - toast    
        }),

要回复问题请先登录注册