ooo4

@kaylabrady07736 什么家庭？

@qwertyzzz 这个应该不行

现在卖出去没有

看来只有将就住了。

以前我也觉得后端返回的数据结构应该保持一致，直到后面被安排到其他项目组，里面的后端都是公司呆了 10 多年那种，接口写的十分的丑陋，什么拼音啊，额外字段用什么 xxx1 ，xxxx2 ，xxxx3 前端根本用不上，虽然代码很恶心，但管他的，说不定明年你就跑路了

@zhengfan2016 因为 setup 函数不是副作用，所以不会重新执行，那么 toRefs 的数据在没有其他副作用的情况下，是不会改变的
如果保持你的代码，那么只能改渲染函数了，让他尽量的像 react
```
// Comp.js 不是 sfc
import { watchEffect, onMounted, toRefs, ref } from 'vue';

export default {
setup() {
let data = ref()
onMounted(() => {
setTimeout(() => {
data.value = { code: 0, data: [666, 777, 888] }
}, 1000)
})

return () => {
// 渲染函数 这是副作用，当响应式数据改变了，就会重新执行
const { data: list } = toRefs(data.value) || {}
watchEffect(() => {
console.log('list', list?.value)
})
// jsx
return 1
}
}
}
```

toRefs 的参数必须是一个对象才行,而且必须还要存在属性，因为它要把对应的属性值变成 ref 。
而现在使用的是 ref 包裹数据，那么也应该是`const {data:list} = toRefs(data.value)`才行，让 list 变成了响应式数据，
但是是通过`data.value = { code: 0, data: [666, 777, 888] }`改变数据，也只是改变了 data(ref)，list 并没有改变，所以 list 还是以前的数据，如果这样`Object.assign(data.value, { code: 0, data: [666, 777, 888] })`修改数据应该可以

看错了 [如果对 ref 包装的 obj 进行解构]
```
import { reactive, watchEffect, onMounted, toRefs, ref } from 'vue';
const data = ref({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data.value, { code: 0, data: [666, 777, 888] })
}, 1000)
})

debugger
const { data: list } = toRefs(data.value)
watchEffect(() => {
console.log('list', list.value)
})
```

@ooo4
不需要这么麻烦
```
import { reactive, watchEffect, onMounted, toRefs } from 'vue';
const data = reactive({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data, { code: 0, data: [666, 777, 888] })
}, 1000)
})


const { data: list } = toRefs(data)
watchEffect(() => {
console.log('list', list.value.length)
})
```

试试这个

const data = reactive({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data, { code: 0, data: [666, 777, 888] })
}, 1000)
})

function useFoo(state) {
const res = {}
watchEffect(() => {
for (let key in state) {
res[key] = toRef(state, key)
}
})
return res
}

const { data: list } = useFoo(data)

watchEffect(() => {
console.log('data', data)
console.log('list', list)
})