From 63e9e2e9aae07c701548f3350ea83535bea22066 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 22 Jun 2021 21:00:26 -0400
Subject: [PATCH] feat(sfc): useAttrs + useSlots

Deprecate useContext
---
 packages/runtime-core/src/apiSetupHelpers.ts | 17 +++++++++++++++++
 packages/runtime-core/src/component.ts       |  8 +++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/runtime-core/src/apiSetupHelpers.ts b/packages/runtime-core/src/apiSetupHelpers.ts
index 03955277a0d..21c4d68f684 100644
--- a/packages/runtime-core/src/apiSetupHelpers.ts
+++ b/packages/runtime-core/src/apiSetupHelpers.ts
@@ -61,10 +61,27 @@ export function defineEmits() {
  */
 export const defineEmit = defineEmits
 
+/**
+ * @deprecated use `useSlots` and `useAttrs` instead.
+ */
 export function useContext(): SetupContext {
+  if (__DEV__) {
+    warn(
+      `\`useContext()\` has been deprecated and will be removed in the ` +
+        `next minor release. Use \`useSlots()\` and \`useAttrs()\` instead.`
+    )
+  }
   const i = getCurrentInstance()!
   if (__DEV__ && !i) {
     warn(`useContext() called without active instance.`)
   }
   return i.setupContext || (i.setupContext = createSetupContext(i))
 }
+
+export function useSlots(): SetupContext['slots'] {
+  return useContext().slots
+}
+
+export function useAttrs(): SetupContext['attrs'] {
+  return useContext().attrs
+}
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
index d15fbbab1a4..5eabaa178bc 100644
--- a/packages/runtime-core/src/component.ts
+++ b/packages/runtime-core/src/component.ts
@@ -815,11 +815,9 @@ export function finishComponentSetup(
   }
 }
 
-const attrHandlers: ProxyHandler<Data> = {
+const attrDevProxyHandlers: ProxyHandler<Data> = {
   get: (target, key: string) => {
-    if (__DEV__) {
-      markAttrsAccessed()
-    }
+    markAttrsAccessed()
     return target[key]
   },
   set: () => {
@@ -847,7 +845,7 @@ export function createSetupContext(
     // properties (overwrites should not be done in prod)
     return Object.freeze({
       get attrs() {
-        return new Proxy(instance.attrs, attrHandlers)
+        return new Proxy(instance.attrs, attrDevProxyHandlers)
       },
       get slots() {
         return shallowReadonly(instance.slots)