feat(runtime-core): detect and warn against components made reactive

close #962

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index ef6f3ab85bf211f45f61dd6b2e4e43c4f94e1779..1bb9b4d729077a77764bb0c72741c5a7b0d3434d 100644 (file)
--- 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,