3***@qq.com

发布：2022-08-17 19:59
更新：2024-02-04 14:54
阅读：866

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

分类：uni-app

bug反馈

产品分类： 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 负责人:无分享

3 个回复

BoredApe - 有问题就会有答案。

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

m***@163.com

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

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

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

要回复问题请先登录或注册

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

示例代码：

<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描述：

3 个回复

公告

相关问题

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

示例代码： <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描述：

与内容相关的链接

3 个回复

公告

相关问题

示例代码：

<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>

操作步骤：

无

预期结果：

会页面出现三个元素

实际结果：

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