feat: remove setupState reactive

RobbinBaauw · Jul 12, 2020 · d4653a9 · d4653a9
1 parent 36acc2b
commit d4653a9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
@@ -1,6 +1,5 @@
 import { VNode, VNodeChild, isVNode } from './vnode'
 import {
-  reactive,
   ReactiveEffect,
   pauseTracking,
   resetTracking,
@@ -9,11 +8,11 @@ import {
 import {
   CreateComponentPublicInstance,
   ComponentPublicInstance,
-  PublicInstanceProxyHandlers,
-  RuntimeCompiledPublicInstanceProxyHandlers,
   createRenderContext,
   exposePropsOnRenderContext,
-  exposeSetupStateOnRenderContext
+  exposeSetupStateOnRenderContext,
+  RuntimeCompiledPublicInstanceProxyHandlers,
+  PublicInstanceProxyHandlers
 } from './componentProxy'
 import {
   ComponentPropsOptions,
@@ -535,7 +534,7 @@ export function handleSetupResult(
     }
     // setup returned bindings.
     // assuming a render function compiled from template is present.
-    instance.setupState = reactive(setupResult)
+    instance.setupState = setupResult
     if (__DEV__) {
       exposeSetupStateOnRenderContext(instance)
     }

diff --git a/packages/runtime-core/src/componentProxy.ts b/packages/runtime-core/src/componentProxy.ts
@@ -15,7 +15,9 @@ import {
   shallowReadonly,
   ReactiveFlags,
   track,
-  TrackOpTypes
+  TrackOpTypes,
+  unref,
+  isRef
 } from '@vue/reactivity'
 import {
   ExtractComputedReturns,
@@ -227,7 +229,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
       if (n !== undefined) {
         switch (n) {
           case AccessTypes.SETUP:
-            return setupState[key]
+            return unref(setupState[key])
           case AccessTypes.DATA:
             return data[key]
           case AccessTypes.CONTEXT:
@@ -238,7 +240,7 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
         }
       } else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
         accessCache![key] = AccessTypes.SETUP
-        return setupState[key]
+        return unref(setupState[key])
       } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
         accessCache![key] = AccessTypes.DATA
         return data[key]
@@ -313,7 +315,8 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
   ): boolean {
     const { data, setupState, ctx } = instance
     if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
-      setupState[key] = value
+      let setupValue = setupState[key]
+      isRef(setupValue) ? (setupValue.value = value) : (setupState[key] = value)
     } else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
       data[key] = value
     } else if (key in instance.props) {

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
@@ -320,7 +320,12 @@ export const setRef = (
     refs[ref] = value
     if (hasOwn(setupState, ref)) {
       queuePostRenderEffect(() => {
-        setupState[ref] = value
+        const setupStateRef = setupState[ref]
+        if (isRef(setupStateRef)) {
+          setupStateRef.value = value
+        } else {
+          setupState[ref] = value
+        }
       }, parentSuspense)
     }
   } else if (isRef(ref)) {