feat(sfc): useAttrs + useSlots

Deprecate useContext

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
+}

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)