vue3 中 props 拿到的数据为什么比控制台的 console.log 慢？
站长
· 阅读数 7
问题背景今天在写组件时，遇到了一个极其怪异的现象。
- 这是一个普通父组件
，在父组件的 beforeMount 中有一个异步函数去获取一个数据列表。 - 紧接着会把这个数据通过 props 传递给子组件<Tab/>
- 然后进入到子组件的 onMounted 钩子函数中，我为了防止 props 为空，特地做了一层判断。
- 然后我就在控制台的输出上发现了一个很诡异的现象，当我在上一步打印 props 整体的时候，我可以拿到整个 props 的信息。 但是如果我想取 props 中某一个具体值时，比如 list ，
，竟然输出为空。（如下图）
问题： JS 从上往下执行的，两个 console 也是同步代码，为什么会发生，上面的 console 有值，但是紧接着下面的 console 却是空值呢？
回复
1个回答
test
2024-07-03
console.log 打印对象和数组之类的引用内容时会在控制台输出一个快照，如果后续有操作影响到了被打印的变量时，在控制台展开的内容也会同步变更。
如果不想要因为后续变更所改变，可以只解构赋值一下，保证快照的正确。比如说 console.log('props.list', [...props.list])，或者用 console.log('props.list', JSON.parse(JSON.stringify(props.list)))。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容