uni-app vue2中的@vue/composition-api在app环境computed有bug无法二次计算

uni-app vue2中的@vue/composition-api在app环境computed有bug无法二次计算

开发环境 版本号 项目创建方式
Windows win10 19044.2251 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10 19044.2251

HBuilderX类型：正式

HBuilderX版本号：4.55

手机系统：Android

手机系统版本号：Android 14

手机厂商：vivo

手机机型：iqoo neo 9

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```vue
<template>  
    <div>  
        <div style="height:40px;position:fixed;top:0;left:0;right:0" :style={  
                    background: `rgba(207, 143, 113, ${navBarOpacity})`,  

        }&gt;&lt;/div&gt;  

        <div style="height:99999px"&gt;&lt;/div&gt;  
    </div&gt;  
</template&gt;  

<script lang="ts" setup&gt;  
// import { useNavbarOpacity } from '@/utils/hooks/usePageScroll'  
import { computed, ref } from '[@vue](/user/vue)/composition-api'  
import { onPageScroll } from '[@dcloudio](/user/dcloudio)/uni-app'  

export function usePageScroll() {  
  const top = ref(0)  
  onPageScroll(e => {  
    top.value = e.scrollTop  
  })  
  return top  
}  

const navigationBarHeight = uni.getSystemInfoSync().statusBarHeight || 44  
export function useNavbarOpacity(navHeight = navigationBarHeight) {  
  const scrollTop = usePageScroll()  
  return computed(() => Math.min(navHeight, scrollTop.value) / navHeight)  
}  

const navBarOpacity = useNavbarOpacity()  

</script&gt;

操作步骤：

在h5环境滚动页面，观察顶部导航栏随着滚动出现透明度效果 在app环境滚动页面看顶部导航栏背景颜色

预期结果：

h5和app滚动时候，顶部的导航栏透明度效果一致，越往下滚动顶部导航栏透明度越低

实际结果：

app滚动导航栏无透明度效果，h5有效果

bug描述：

app里面使用@vue/composition-api 里面的computed计算属性，计算属性没有任何效果 安装官网配置的vue2.6+ts+composition-api项目


更多关于uni-app vue2中的@vue/composition-api在app环境computed有bug无法二次计算的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

uniapp vue2 项目不支持 setup 语法，直接安装和引用相关插件不保证完全可用。建议升级 vue3 使用完整 setup 特性。

更多关于uni-app vue2中的@vue/composition-api在app环境computed有bug无法二次计算的实战教程也可以访问 https://www.itying.com/category-93-b0.html


老项目vue2不方便切vue3，只能用watch实现类似方案了

用 watch 实现吧

最后的确是用watch实现类类似效果，无奈了

这是一个已知的@vue/composition-api在uni-app App环境下的兼容性问题。问题核心在于App端对Vue 2 Composition API的computed属性响应式支持不完善。

解决方案：

  1. 改用响应式ref替代computed
const navBarOpacity = ref(0)
const scrollTop = usePageScroll()

watch(scrollTop, (newVal) => {
  const opacity = Math.min(navigationBarHeight, newVal) / navigationBarHeight
  navBarOpacity.value = opacity
}, { immediate: true })
  1. 使用传统Options API
export default {
  data() {
    return {
      navBarOpacity: 0
    }
  },
  onPageScroll(e) {
    const opacity = Math.min(navigationBarHeight, e.scrollTop) / navigationBarHeight
    this.navBarOpacity = opacity
  }
}
回到顶部