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

packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap

@@ -12,6 +12,15 @@ return function render() {
 }"
 `;
 
+exports[`compiler: codegen CacheExpression 1`] = `
+"
+export default function render() {
+  const _ctx = this
+  const _cache = _ctx.$cache
+  return _cache[1] || (_cache[1] = foo)
+}"
+`;
+
 exports[`compiler: codegen ConditionalExpression 1`] = `
 "
 return function render() {

packages/compiler-core/__tests__/codegen.spec.ts

@@ -137,12 +137,6 @@ describe('compiler: codegen', () => {
     expect(code).toMatchSnapshot()
   })
 
-  test('cached', () => {
-    const root = createRoot({ cached: 3 })
-    const { code } = generate(root)
-    expect(code).toMatch(`let _cached_1, _cached_2, _cached_3`)
-  })
-
   test('prefixIdentifiers: true should inject _ctx statement', () => {
     const { code } = generate(createRoot(), { prefixIdentifiers: true })
     expect(code).toMatch(`const _ctx = this\n`)
@@ -371,12 +365,19 @@ describe('compiler: codegen', () => {
   test('CacheExpression', () => {
     const { code } = generate(
       createRoot({
+        cached: 1,
         codegenNode: createCacheExpression(
           1,
           createSimpleExpression(`foo`, false)
         )
-      })
+      }),
+      {
+        mode: 'module',
+        prefixIdentifiers: true
+      }
     )
-    expect(code).toMatch(`_cached_1 || (_cached_1 = foo)`)
+    expect(code).toMatch(`const _cache = _ctx.$cache`)
+    expect(code).toMatch(`_cache[1] || (_cache[1] = foo)`)
+    expect(code).toMatchSnapshot()
   })
 })

packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap

@@ -204,20 +204,18 @@ return function render() {
 `;
 
 exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist elements with cached handlers 1`] = `
-"const _Vue = Vue
+"import { createVNode, createBlock, openBlock } from \\"vue\\"
 
-let _cached_1
-
-return function render() {
-  with (this) {
-    const { createVNode: _createVNode, createBlock: _createBlock, openBlock: _openBlock } = _Vue
-    
-    return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(\\"div\\", {
-        onClick: _cached_1 || (_cached_1 = $event => (_ctx.foo($event)))
+export default function render() {
+  const _ctx = this
+  const _cache = _ctx.$cache
+  return (openBlock(), createBlock(\\"div\\", null, [
+    createVNode(\\"div\\", null, [
+      createVNode(\\"div\\", {
+        onClick: _cache[1] || (_cache[1] = $event => (_ctx.foo($event)))
       })
-    ]))
-  }
+    ])
+  ]))
 }"
 `;
 

packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts

@@ -660,14 +660,22 @@ describe('compiler: hoistStatic transform', () => {
     })
 
     test('should NOT hoist elements with cached handlers', () => {
-      const { root } = transformWithHoist(`<div><div @click="foo"/></div>`, {
-        prefixIdentifiers: true,
-        cacheHandlers: true
-      })
+      const { root } = transformWithHoist(
+        `<div><div><div @click="foo"/></div></div>`,
+        {
+          prefixIdentifiers: true,
+          cacheHandlers: true
+        }
+      )
 
       expect(root.cached).toBe(1)
       expect(root.hoists.length).toBe(0)
-      expect(generate(root).code).toMatchSnapshot()
+      expect(
+        generate(root, {
+          mode: 'module',
+          prefixIdentifiers: true
+        }).code
+      ).toMatchSnapshot()
     })
   })
 })