不如摸鱼去

发布：2023-03-22 17:51
更新：2023-12-11 20:18
阅读：809

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

分类：uni-app

bug反馈支付宝小程序 vue3 vite

产品分类： 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 负责人:无分享

3 个回复

最佳回复

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    
        }),

要回复问题请先登录或注册

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

操作步骤：

`<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>`

预期结果：

正常渲染

bug描述：

3 个回复

公告

相关问题

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

操作步骤： <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>

预期结果： 正常渲染

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

操作步骤：

`<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>`

预期结果：

正常渲染