uni-app Vue Property Decorator 写法的项目转字节小程序时，data在页面第一次渲染时未取到

uni-app Vue Property Decorator 写法的项目转字节小程序时，data在页面第一次渲染时未取到

示例代码：

见附件

操作步骤：

见附件

预期结果：

页面第一次渲染时，能够取到data

实际结果：

页面第一次渲染时，不能取到data

bug描述：

在 uniapp 上用 Vue Property Decorator 写法 转到字节小程序，data在页面第一次渲染时未取到，导致 条件渲染有问题

信息类型 详细信息
产品分类 uniapp/小程序/抖音
PC开发环境 Mac
PC开发环境版本 11.6.1
第三方开发者工具 VSCode
基础库版本号 @dcloudio/uni-mp-toutiao: ^2.0.0-31920210709003
项目创建方式 CLI
CLI版本号 @vue/cli-service: ~4.5.0

Image Image Image


更多关于uni-app Vue Property Decorator 写法的项目转字节小程序时，data在页面第一次渲染时未取到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app Vue Property Decorator 写法的项目转字节小程序时，data在页面第一次渲染时未取到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的Vue Property Decorator在字节小程序平台上的兼容性问题。问题核心在于装饰器语法在编译到字节小程序时，data初始化的时机与标准Vue项目存在差异。

问题分析：

  1. 在字节小程序平台，使用@Component装饰器的类组件，其data属性的初始化可能发生在页面生命周期onLoad之后，导致首次渲染时数据未就绪。
  2. 条件渲染（如v-if）依赖的data数据在首次渲染时可能为初始值（如undefined或false），而非装饰器中定义的值。

解决方案：

方案一：使用computed替代data（推荐） 将需要在模板中立即使用的数据定义为computed属性，确保首次渲染时能获取到值：

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Index extends Vue {
  private rawData = 'initial value'
  
  get pageData() {
    return this.rawData || 'default value'
  }
}

方案二：在onLoad中显式设置data 在页面生命周期中手动设置数据，确保渲染时数据已就绪：

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Index extends Vue {
  private pageData: string = ''
  
  onLoad() {
    this.pageData = 'initial value'
  }
}

方案三：使用ref进行条件渲染控制 对于条件渲染，可以使用ref控制DOM渲染时机：

<template>
  <view v-if="isMounted">
    <!-- 内容 -->
  </view>
</template>

<script>
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Index extends Vue {
  private isMounted = false
  
  onReady() {
    this.isMounted = true
  }
}
</script>

方案四：降级到Options API写法 如果问题持续存在，可暂时使用Options API确保兼容性：

export default {
  data() {
    return {
      pageData: 'initial value'
    }
  }
}
回到顶部