uni-app 纯nvue项目 新版更新后 computed 计算属性 传参会导致页面白屏。

uni-app 纯nvue项目 新版更新后 computed 计算属性 传参会导致页面白屏。

开发环境 版本号 项目创建方式
Windows Windows 64位家庭版 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：Alpha

HBuilderX版本号：3.1.4

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：红米Note7

页面类型：nvue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<scroll-view class="tab-bar" :scroll="false" scroll-x scroll-with-animation:show-scrollbar="false">  
  <div class="paly-item" :class="linkStyle(v)" v-for="(v,k) in play_list" :key="k" @tap="PrePlay(v,k)">  
    <text class="paly-text" :class="k == nid ?'cur':''">{{k+1}}</text>  
  </div>   
</scroll-view>  

computed:{  
    linkStyle(){  
        return (key) => {  
            let style = '';  
            if(key < 10){  
                style +=" numItem";  
            }  
            if(key == nid){  
                style +=" cur";  
            }  
            return style;  
        }     
    }  
},

操作步骤：

计算属性传参

预期结果：

正常

实际结果：

白屏

bug描述：

同样的项目，在 HBX v3.1.0 版本之前 项目一直正常运行，更新至最新 v3.1.4 后进入使用`计算属性`的页面都会白屏。计算属性不能支持传参，只要传参就会白屏，这个问题 是否为新版更新后不再支持 计算属性传参？？？？？？？？
文档里不是说 `完整支持 Vue官方文档：计算属性。`吗？还是nvue下已经不支持了，是否有在哪里通知注明过？

更多关于uni-app 纯nvue项目 新版更新后 computed 计算属性 传参会导致页面白屏。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

computed中的nid变量请使用this
经测试没有白屏现象
有没有什么报错信息

更多关于uni-app 纯nvue项目 新版更新后 computed 计算属性 传参会导致页面白屏。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


嗯 没有报错， 感谢回复，就是忘记写this了

这是一个已知的兼容性问题。在uni-app 3.1.4版本中，nvue环境下计算属性传参确实会导致页面白屏，这是新版引入的bug。

从技术实现角度看，计算属性本身设计上是不支持直接传参的。Vue官方文档中计算属性应该是无副作用的响应式getter，传参用法实际上是通过返回函数实现的变通方案。

建议的临时解决方案：

  1. 改用methods替代计算属性传参
methods: {
  linkStyle(key) {
    let style = '';
    if(key < 10){
      style += " numItem";
    }
    if(key == this.nid){
      style += " cur";
    }
    return style;
  }
}
  1. 在模板中直接调用method
<div class="paly-item" :class="linkStyle(v)" v-for="(v,k) in play_list" :key="k">
回到顶部