wip: ref v-for compat

packages/runtime-core/src/compat/compatConfig.ts

@@ -44,6 +44,7 @@ export const enum DeprecationTypes {
   WATCH_ARRAY = 'WATCH_ARRAY',
   PROPS_DEFAULT_THIS = 'PROPS_DEFAULT_THIS',
 
+  V_FOR_REF = 'V_FOR_REF',
   V_ON_KEYCODE_MODIFIER = 'V_ON_KEYCODE_MODIFIER',
   CUSTOM_DIR = 'CUSTOM_DIR',
 
@@ -287,6 +288,13 @@ const deprecationData: Record<DeprecationTypes, DeprecationData> = {
     link: `https://v3.vuejs.org/guide/migration/custom-directives.html`
   },
 
+  [DeprecationTypes.V_FOR_REF]: {
+    message:
+      `Ref usage on v-for no longer creates array ref values in Vue 3. ` +
+      `Consider using function refs or refactor to avoid ref usage altogether.`,
+    link: `https://v3.vuejs.org/guide/migration/array-refs.html`
+  },
+
   [DeprecationTypes.V_ON_KEYCODE_MODIFIER]: {
     message:
       `Using keyCode as v-on modifier is no longer supported. ` +
@@ -447,16 +455,18 @@ export function warnDeprecation(
   }
 
   const dupKey = key + args.join('')
-  const compName = instance && formatComponentName(instance, instance.type)
+  let compId: string | number | null =
+    instance && formatComponentName(instance, instance.type)
+  if (compId === 'Anonymous' && instance) {
+    compId = instance.uid
+  }
 
   // skip if the same warning is emitted for the same component type
-  if (compName !== `Anonymous`) {
-    const componentDupKey = dupKey + compName
-    if (componentDupKey in instanceWarned) {
-      return
-    }
-    instanceWarned[componentDupKey] = true
+  const componentDupKey = dupKey + compId
+  if (componentDupKey in instanceWarned) {
+    return
   }
+  instanceWarned[componentDupKey] = true
 
   // same warning, but different component. skip the long message and just
   // log the key and count.

packages/runtime-core/src/compat/ref.ts

@@ -0,0 +1,45 @@
+import { isArray, remove } from '@vue/shared'
+import { ComponentInternalInstance, Data } from '../component'
+import { VNode } from '../vnode'
+import { DeprecationTypes, warnDeprecation } from './compatConfig'
+
+export function convertLegacyRefInFor(vnode: VNode) {
+  // refInFor
+  if (vnode.props && vnode.props.refInFor) {
+    delete vnode.props.refInFor
+    if (vnode.ref) {
+      if (isArray(vnode.ref)) {
+        vnode.ref.forEach(r => (r.f = true))
+      } else {
+        vnode.ref.f = true
+      }
+    }
+  }
+}
+
+export function registerLegacyRef(
+  refs: Data,
+  key: string,
+  value: any,
+  owner: ComponentInternalInstance,
+  isInFor: boolean | undefined,
+  isUnmount: boolean
+) {
+  const existing = refs[key]
+  if (isUnmount) {
+    if (isArray(existing)) {
+      remove(existing, value)
+    } else {
+      refs[key] = null
+    }
+  } else if (isInFor) {
+    __DEV__ && warnDeprecation(DeprecationTypes.V_FOR_REF, owner)
+    if (!isArray(existing)) {
+      refs[key] = [value]
+    } else if (!existing.includes(value)) {
+      existing.push(value)
+    }
+  } else {
+    refs[key] = value
+  }
+}

packages/runtime-core/src/compat/renderFn.ts

@@ -171,7 +171,7 @@ export function compatH(
 }
 
 const skipLegacyRootLevelProps = /*#__PURE__*/ makeMap(
-  'refInFor,staticStyle,staticClass,directives,model'
+  'staticStyle,staticClass,directives,model,hook'
 )
 
 function convertLegacyProps(
@@ -206,8 +206,6 @@ function convertLegacyProps(
           }
         }
       }
-    } else if (key === 'hook') {
-      // TODO
     } else if (!skipLegacyRootLevelProps(key)) {
       converted[key] = legacyProps[key as keyof LegacyVNodeProps]
     }