fix(runtime-core): track access to $attrs

fix #1346
vuejs · Jun 12, 2020 · 6abac87 · 6abac87
1 parent 91fa528
commit 6abac87
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
@@ -1,4 +1,9 @@
-import { toRaw, shallowReactive } from '@vue/reactivity'
+import {
+  toRaw,
+  shallowReactive,
+  trigger,
+  TriggerOpTypes
+} from '@vue/reactivity'
 import {
   EMPTY_OBJ,
   camelize,
@@ -215,6 +220,9 @@ export function updateProps(
     }
   }
 
+  // trigger updates for $attrs in case it's used in component slots
+  trigger(instance, TriggerOpTypes.SET, '$attrs')
+
   if (__DEV__ && rawProps) {
     validateProps(props, instance.type)
   }

diff --git a/packages/runtime-core/src/componentProxy.ts b/packages/runtime-core/src/componentProxy.ts
@@ -13,7 +13,9 @@ import {
   UnwrapRef,
   toRaw,
   shallowReadonly,
-  ReactiveFlags
+  ReactiveFlags,
+  track,
+  TrackOpTypes
 } from '@vue/reactivity'
 import {
   ExtractComputedReturns,
@@ -260,8 +262,9 @@ export const PublicInstanceProxyHandlers: ProxyHandler<any> = {
     let cssModule, globalProperties
     // public $xxx properties
     if (publicGetter) {
-      if (__DEV__ && key === '$attrs') {
-        markAttrsAccessed()
+      if (key === '$attrs') {
+        track(instance, TrackOpTypes.GET, key)
+        __DEV__ && markAttrsAccessed()
       }
       return publicGetter(instance)
     } else if (