From 2e06f5bbe84155588dea82d90822a41dc93d0688 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 14 Apr 2020 18:07:47 -0400 Subject: [PATCH] feat(runtime-core): detect and warn against components made reactive close #962 --- packages/runtime-core/src/vnode.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index ef6f3ab85bf..1bb9b4d7290 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -17,7 +17,7 @@ import { ClassComponent } from './component' import { RawSlots } from './componentSlots' -import { isReactive, Ref } from '@vue/reactivity' +import { isReactive, Ref, toRaw } from '@vue/reactivity' import { AppContext } from './apiCreateApp' import { SuspenseImpl, @@ -236,7 +236,7 @@ const createVNodeWithArgsTransform = ( export const InternalObjectSymbol = Symbol() -export const createVNode = (__DEV__ +export const createVNode = (false ? createVNodeWithArgsTransform : _createVNode) as typeof _createVNode @@ -292,6 +292,22 @@ function _createVNode( ? ShapeFlags.FUNCTIONAL_COMPONENT : 0 + if ( + __DEV__ && + shapeFlag & ShapeFlags.STATEFUL_COMPONENT && + isReactive(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 \`markNonReactive\` or using \`shallowRef\` ` + + `instead of \`ref\`.`, + `\nComponent that was made reactive: `, + type + ) + } + const vnode: VNode = { _isVNode: true, type,