supported nested scope refs

Author: yyx990803

src/directives/scope.ts

@@ -1,27 +1,24 @@
 import { reactive } from '@vue/reactivity'
-import { isObject } from '@vue/shared'
 import { Context } from '../walk'
 
-export const createScopedContext = (ctx: Context, data: object): Context => {
-  if (isObject(data)) {
-    const parentScope = ctx.scope
-    const mergedScope = Object.create(parentScope)
-    Object.defineProperties(mergedScope, Object.getOwnPropertyDescriptors(data))
-    const proxy = new Proxy(mergedScope, {
-      set(target, key, val, receiver) {
-        // when setting a property that doesn't exist on current scope,
-        // do not create it on the current scope and fallback to parent scope.
-        if (receiver === reactiveProxy && !target.hasOwnProperty(key)) {
-          return Reflect.set(parentScope, key, val)
-        }
-        return Reflect.set(target, key, val, receiver)
+export const createScopedContext = (ctx: Context, data = {}): Context => {
+  const parentScope = ctx.scope
+  const mergedScope = Object.create(parentScope)
+  Object.defineProperties(mergedScope, Object.getOwnPropertyDescriptors(data))
+  mergedScope.$refs = Object.create(parentScope.$refs)
+  const proxy = new Proxy(mergedScope, {
+    set(target, key, val, receiver) {
+      // when setting a property that doesn't exist on current scope,
+      // do not create it on the current scope and fallback to parent scope.
+      if (receiver === reactiveProxy && !target.hasOwnProperty(key)) {
+        return Reflect.set(parentScope, key, val)
       }
-    })
-    const reactiveProxy = reactive(proxy)
-    return {
-      ...ctx,
-      scope: reactiveProxy
+      return Reflect.set(target, key, val, receiver)
     }
+  })
+  const reactiveProxy = reactive(proxy)
+  return {
+    ...ctx,
+    scope: reactiveProxy
   }
-  return ctx
 }

tests/ref.html

@@ -14,4 +14,13 @@
     change dynamicRef
   </button>
   <button @click="show = !show">toggle</button>
+
+  <div v-scope>
+    <p ref="x">nested scope ref</p>
+    <button
+      @click="console.log({ x: $refs.x, y: $refs.y, input: $refs.input })"
+    >
+      log nested scope refs
+    </button>
+  </div>
 </div>