3***@qq.com
3***@qq.com
  • 发布:2022-08-17 19:59
  • 更新:2024-02-04 14:54
  • 阅读:686

【报Bug】vue3 使用组合式 api 以及 setup 语法糖时,reactive 和 ref 定义属性更新页面不更新

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.15

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: 小米

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view v-for="(item,index) in list.items">{{item}}</view>
</template>
<script setup>
const list = reactive({
items:[],
pageInfo:{}
})
setTimeOut(()=>{
list = {
items:['a','b','c'],
pageInfo:{}
}
})
</script>

操作步骤:

预期结果:

会页面出现三个元素

实际结果:

页面没变化,打印结果变了

bug描述:

vue3 使用组合式 api 以及 setup 语法糖时,reactive 和 ref 定义属性更新页面不更新

2022-08-17 19:59 负责人:无 分享
已邀请:
BoredApe

BoredApe - 有问题就会有答案。

请上传能重现问题的测试工程。

m***@163.com

m***@163.com

我也遇到了,第一次进入页面push修改数据正常,返回上一个页面再次进入,push更新数据后,页面不刷新,log发现新增的数据不是Proxy

3***@qq.com

3***@qq.com (作者) - anzai1990

list = { items:['a','b','c'], pageInfo:{} } } 这种赋值方式是错误的,会破坏reactive的动态响应,要使用list.items = ['a','b','c'] 方式

要回复问题请先登录注册