[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref
產(chǎn)生：這個(gè)警告是在vue3使用組件的時(shí)候拋出來的
產(chǎn)生時(shí)期：內(nèi)部方法_createVNode調(diào)用產(chǎn)生的
部分源碼如下 ：
const shapeFlag = isString(type)
? ShapeFlags.ELEMENT
: __FEATURE_SUSPENSE__ && isSuspense(type)
? ShapeFlags.SUSPENSE
: isTeleport(type)
? ShapeFlags.TELEPORT
: isObject(type)
? ShapeFlags.STATEFUL_COMPONENT
: isFunction(type)
? ShapeFlags.FUNCTIONAL_COMPONENT
: 0
if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
type = toRaw(type)
warn(
`Vue received a Component which was made a reactive object. This can ` +
`lead to unnecessary performance overhead, and should be avoided by ` +
`marking the component with \`markRaw\` or using \`shallowRef\` ` +
`instead of \`ref\`.`,
`\nComponent that was made reactive: `,
type
)
}
其中炉擅，
1.DEV為true
2.shapeFlag和shapeFlag.STATEFUL_COMPONENT都返回4
3.重點(diǎn)在于isProxy方法衙熔，此方法主要是檢測是否存在__v__isReactive屬性
shallowReactive是存在的蚕甥，返回true
markRaw和shallowRef是不存在，返回undefined
打印如下：
console.error(shallowReactive(sonComponent).__v_isReactive)
console.error(markRaw(sonComponent).__v_isReactive)
console.error(shallowRef(sonComponent).__v_isReactive)
控制臺(tái)打印驗(yàn)證
因此使用markRaw和shallowRef是可以的柱彻，使用shallowReactive警告會(huì)一直存在
具體為什么這么設(shè)計(jì)，后續(xù)有時(shí)間繼續(xù)探索餐胀！
