uni-app下App.vue的onshow里使用this调用setup里的函数报错

uni-app下App.vue的onshow里使用this调用setup里的函数报错

示例代码：

<script>
export default {
setup() {
let checkSocket = () => {
console.log('AppVue::::::checkSocket')
}
return {
checkSocket
}
},
onShow: function() {
this.checkSocket()
console.log('AppVue Show')
}
}
</script>  

<style lang="scss">
</style>

操作步骤：

直接运行就可以，

预期结果：

应正常运行

实际结果：

报错：不是函数

bug描述：

uniapp编译。函数写在App.vue的setup里，编译app正常，H5报不是函数。page里写同样代码都正常。

image

开发环境 版本号 项目创建方式
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win7
HBuilderX类型 正式
HBuilderX版本号 3.3.13
浏览器平台 Chrome
浏览器版本 96.0.4664.93
项目创建方式 HBuilderX

更多关于uni-app下App.vue的onshow里使用this调用setup里的函数报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

已确认，下个Alpha版本修复

更多关于uni-app下App.vue的onshow里使用this调用setup里的函数报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我是新手刚学，居然就在入口发现bug了，几百万程序员居然都没这么用过…

HBuilderX alpha 3.4.10+ 已经修复

在 uni-app 中，App.vue 的 onShow 生命周期钩子中直接使用 this 调用 setup 中的函数可能会报错，因为 setup 函数中的 this 并不指向 Vue 实例。setup 函数是 Vue 3 引入的 Composition API 的一部分，它没有 this 上下文。

要解决这个问题，你可以通过以下几种方式来实现：

1. 使用 ref 或 reactive 来存储函数

你可以在 setup 中定义一个函数，并将其存储在 ref 或 reactive 中，然后在 onShow 中调用它。

<template>
  <div>App</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myFunction = ref(() => {
      console.log('Function called from onShow');
    });

    return {
      myFunction,
    };
  },
  onShow() {
    this.myFunction();
  },
};
</script>

2. 使用 provide 和 inject

你可以在 setup 中使用 provide 提供函数，然后在 onShow 中使用 inject 获取函数。

<template>
  <div>App</div>
</template>

<script>
import { provide, inject } from 'vue';

export default {
  setup() {
    const myFunction = () => {
      console.log('Function called from onShow');
    };

    provide('myFunction', myFunction);

    return {};
  },
  onShow() {
    const myFunction = inject('myFunction');
    myFunction();
  },
};
</script>

3. 使用 setup 中的生命周期钩子

如果你不需要在 onShow 中调用函数，而是可以在 setup 中使用生命周期钩子，那么你可以直接在 setup 中使用 onMounted 或 onUpdated 等钩子。

<template>
  <div>App</div>
</template>

<script>
import { onMounted } from 'vue';

export default {
  setup() {
    const myFunction = () => {
      console.log('Function called from onShow');
    };

    onMounted(() => {
      myFunction();
    });

    return {};
  },
};
</script>

4. 使用 getCurrentInstance

你可以使用 getCurrentInstance 来获取当前组件实例，然后调用 setup 中的函数。

<template>
  <div>App</div>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const myFunction = () => {
      console.log('Function called from onShow');
    };

    return {
      myFunction,
    };
  },
  onShow() {
    const instance = getCurrentInstance();
    instance.proxy.myFunction();
  },
};
</script>
回到顶部