fix(compiler): cache handlers should be per-instance, fix hoist w/ cached handlers

packages/compiler-core/src/codegen.ts

@@ -219,7 +219,6 @@ export function generate(
       }
     }
     genHoists(ast.hoists, context)
-    genCached(ast.cached, context)
     newline()
     push(`return `)
   } else {
@@ -228,7 +227,6 @@ export function generate(
       push(`import { ${ast.helpers.map(helper).join(', ')} } from "vue"\n`)
     }
     genHoists(ast.hoists, context)
-    genCached(ast.cached, context)
     newline()
     push(`export default `)
   }
@@ -253,6 +251,10 @@ export function generate(
     }
   } else {
     push(`const _ctx = this`)
+    if (ast.cached > 0) {
+      newline()
+      push(`const _cache = _ctx.$cache`)
+    }
     newline()
   }
 
@@ -318,18 +320,6 @@ function genHoists(hoists: JSChildNode[], context: CodegenContext) {
   })
 }
 
-function genCached(cached: number, context: CodegenContext) {
-  if (cached > 0) {
-    context.newline()
-    context.push(`let `)
-    for (let i = 0; i < cached; i++) {
-      context.push(`_cached_${i + 1}`)
-      if (i !== cached - 1) context.push(`, `)
-    }
-    context.newline()
-  }
-}
-
 function isText(n: string | CodegenNode) {
   return (
     isString(n) ||
@@ -632,7 +622,7 @@ function genSequenceExpression(
 }
 
 function genCacheExpression(node: CacheExpression, context: CodegenContext) {
-  context.push(`_cached_${node.index} || (_cached_${node.index} = `)
+  context.push(`_cache[${node.index}] || (_cache[${node.index}] = `)
   genNode(node.value, context)
   context.push(`)`)
 }

packages/compiler-core/src/transform.ts

@@ -219,12 +219,7 @@ function createTransformContext(
       )
     },
     cache(exp) {
-      if (cacheHandlers) {
-        context.cached++
-        return createCacheExpression(context.cached, exp)
-      } else {
-        return exp
-      }
+      return cacheHandlers ? createCacheExpression(++context.cached, exp) : exp
     }
   }
 

packages/compiler-core/src/transforms/hoistStatic.ts

@@ -50,12 +50,7 @@ function walk(
       child.type === NodeTypes.ELEMENT &&
       child.tagType === ElementTypes.ELEMENT
     ) {
-      const hasBailoutProp = hasDynamicKeyOrRef(child) || hasCachedProps(child)
-      if (
-        !doNotHoistNode &&
-        !hasBailoutProp &&
-        isStaticNode(child, resultCache)
-      ) {
+      if (!doNotHoistNode && isStaticNode(child, resultCache)) {
         // whole tree is static
         child.codegenNode = context.hoist(child.codegenNode!)
         continue
@@ -67,7 +62,8 @@ function walk(
           (!flag ||
             flag === PatchFlags.NEED_PATCH ||
             flag === PatchFlags.TEXT) &&
-          !hasBailoutProp
+          !hasDynamicKeyOrRef(child) &&
+          !hasCachedProps(child)
         ) {
           const props = getNodeProps(child)
           if (props && props !== `null`) {
@@ -105,7 +101,7 @@ export function isStaticNode(
         return cached
       }
       const flag = getPatchFlag(node)
-      if (!flag) {
+      if (!flag && !hasDynamicKeyOrRef(node) && !hasCachedProps(node)) {
         // element self is static. check its children.
         for (let i = 0; i < node.children.length; i++) {
           if (!isStaticNode(node.children[i], resultCache)) {