feat(sfc): useAttrs + useSlots

Deprecate useContext
vuejs · Jun 23, 2021 · 63e9e2e · 63e9e2e
1 parent 6f6f0cf
commit 63e9e2e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git 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
@@ -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)