V2EX › ooo4 的所有回复 › 第 1 页 / 共 5 页

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

1 2 3 4 5

❮

❯

2 小时 40 分钟前

回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗

@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
}
}
}
```

19 小时 3 分钟前

回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗

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)
})
```

19 小时 21 分钟前

回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗

@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)
})
```

19 小时 44 分钟前

回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗

试试这个

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

19 小时 47 分钟前

回复了 ooo4 创建的主题 › React › react 新手关于 react useEffect 的困惑，为什么 useEffect 里面的 cleanup 函数里面的 props 是旧的，如何从源码解释？

@zhengfan2016 因为我在调试 react 源码，不想通过合成事件去触发，徒增额外调试

2 天前

回复了 ooo4 创建的主题 › React › react 新手关于 react useEffect 的困惑，为什么 useEffect 里面的 cleanup 函数里面的 props 是旧的，如何从源码解释？

@shintendo 从 chrome 的 debugger 工具看，这个 props 确实是来源于闭包，thanks!!

5 天前

回复了 ooo4 创建的主题 › 前端开发 › 明年想换个 react 的工作了，最近也在 debugger react 源码，但是并没有做过 react 的真实项目，简历可以写熟悉 react 吗，或者说只是这种能接到面试吗？

@maclanelf134 那不至于，主要是嫌弃公司的垃圾项目，不想维护

5 天前

@Liam1997 项目没写过，但 react 的官网看过几次，可以用一个很简单的 demo 打断点一步一步的调试，再看看那些大佬总结的笔记，调试过十几次自然就看的进去了，不过也就简单了解下核心流程

5 天前