wip(ssr): adjust event hydration flag

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

@@ -3,7 +3,7 @@
 exports[`compiler: codegen ArrayExpression 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return [
       foo,
       bar(baz)
@@ -34,7 +34,7 @@ export function render(_ctx, _cache) {
 exports[`compiler: codegen ConditionalExpression 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return ok
       ? foo()
       : orNot
@@ -47,7 +47,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen Element (callExpression + objectExpression + TemplateChildNode[]) 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return _createVNode(\\"div\\", {
       id: \\"foo\\",
       [prop]: bar,
@@ -62,7 +62,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen assets + temps 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const _component_Foo = _resolveComponent(\\"Foo\\")
     const _component_bar_baz = _resolveComponent(\\"bar-baz\\")
     const _component_barbaz = _resolveComponent(\\"barbaz\\")
@@ -78,7 +78,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen comment 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return _createCommentVNode(\\"foo\\")
   }
 }"
@@ -87,7 +87,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen compound expression 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return _ctx.foo + _toDisplayString(bar) + nested
   }
 }"
@@ -96,7 +96,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen forNode 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(), 1))
   }
 }"
@@ -106,7 +106,7 @@ exports[`compiler: codegen function mode preamble 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, resolveDirective: _resolveDirective } = _Vue
 
     return null
@@ -128,7 +128,7 @@ const _hoisted_1 = hello
 const _hoisted_2 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return null
   }
 }"
@@ -137,7 +137,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen ifNode 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return foo
       ? bar
       : baz
@@ -148,7 +148,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen interpolation 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return _toDisplayString(hello)
   }
 }"
@@ -176,7 +176,7 @@ export function render(_ctx, _cache) {
 exports[`compiler: codegen static text 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     return \\"hello\\"
   }
 }"
@@ -185,7 +185,7 @@ return function render(_ctx, _cache) {
 exports[`compiler: codegen temps 1`] = `
 "
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     let _temp0, _temp1, _temp2
 
     return null

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

@@ -4,7 +4,7 @@ exports[`compiler: integration tests function mode 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment, renderList: _renderList, createTextVNode: _createTextVNode } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", {

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

@@ -5,8 +5,8 @@ exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
 const _withId = _withScopeId(\\"test\\")
 
 _pushScopeId(\\"test\\")
-const _hoisted_1 = _createVNode(\\"div\\", null, \\"hello\\", -2 /* HOISTED */)
-const _hoisted_2 = _createVNode(\\"div\\", null, \\"world\\", -2 /* HOISTED */)
+const _hoisted_1 = _createVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_2 = _createVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
 _popScopeId()
 
 export const render = _withId(function render(_ctx, _cache) {
@@ -58,7 +58,7 @@ export const render = _withId(function render(_ctx, _cache) {
         ])
       }
     })
-  ]), 512 /* DYNAMIC_SLOTS */))
+  ]), 1024 /* DYNAMIC_SLOTS */))
 })"
 `;
 

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

@@ -589,7 +589,7 @@ describe('compiler: codegen', () => {
     expect(code).toMatchInlineSnapshot(`
       "
       return function render(_ctx, _cache) {
-        with (this) {
+        with (_ctx) {
           return foo = bar
         }
       }"
@@ -602,7 +602,7 @@ describe('compiler: codegen', () => {
         createRoot({
           codegenNode: node
         })
-      ).code.match(/with \(this\) \{\s+([^]+)\s+\}\s+\}$/)![1]
+      ).code.match(/with \(_ctx\) \{\s+([^]+)\s+\}\s+\}$/)![1]
     }
 
     const mockProps = createObjectExpression([

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

@@ -4,10 +4,10 @@ exports[`compiler: hoistStatic transform hoist element with static key 1`] = `
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"div\\", { key: \\"foo\\" }, null, -2 /* HOISTED */)
+const _hoisted_1 = _createVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -24,10 +24,10 @@ const { createVNode: _createVNode } = _Vue
 const _hoisted_1 = _createVNode(\\"p\\", null, [
   _createVNode(\\"span\\"),
   _createVNode(\\"span\\")
-], -2 /* HOISTED */)
+], -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -43,10 +43,10 @@ const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _
 
 const _hoisted_1 = _createVNode(\\"div\\", null, [
   _createCommentVNode(\\"comment\\")
-], -2 /* HOISTED */)
+], -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createCommentVNode: _createCommentVNode, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -60,11 +60,11 @@ exports[`compiler: hoistStatic transform hoist siblings with common non-hoistabl
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", null, null, -2 /* HOISTED */)
-const _hoisted_2 = _createVNode(\\"div\\", null, null, -2 /* HOISTED */)
+const _hoisted_1 = _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = _createVNode(\\"div\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -79,10 +79,10 @@ exports[`compiler: hoistStatic transform hoist simple element 1`] = `
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -2 /* HOISTED */)
+const _hoisted_1 = _createVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -99,13 +99,13 @@ const { createVNode: _createVNode } = _Vue
 const _hoisted_1 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _directive_foo = _resolveDirective(\\"foo\\")
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
-      _withDirectives(_createVNode(\\"div\\", _hoisted_1, null, -1 /* NEED_PATCH */), [
+      _withDirectives(_createVNode(\\"div\\", _hoisted_1, null, 512 /* NEED_PATCH */), [
         [_directive_foo]
       ])
     ]))
@@ -120,7 +120,7 @@ const { createVNode: _createVNode } = _Vue
 const _hoisted_1 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -137,7 +137,7 @@ const { createVNode: _createVNode } = _Vue
 const _hoisted_1 = { id: \\"foo\\" }
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -158,7 +158,7 @@ const { createVNode: _createVNode } = _Vue
 const _hoisted_1 = { class: { foo: true } }
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -172,10 +172,10 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", null, \\"foo \\" + _toDisplayString(1) + \\" \\" + _toDisplayString(true), -2 /* HOISTED */)
+const _hoisted_1 = _createVNode(\\"span\\", null, \\"foo \\" + _toDisplayString(1) + \\" \\" + _toDisplayString(true), -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -189,10 +189,10 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", { foo: 0 }, _toDisplayString(1), -2 /* HOISTED */)
+const _hoisted_1 = _createVNode(\\"span\\", { foo: 0 }, _toDisplayString(1), -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -220,7 +220,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -238,7 +238,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -257,7 +257,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, toDisplayString: _toDisplayString, createVNode: _createVNode } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -275,7 +275,7 @@ exports[`compiler: hoistStatic transform should NOT hoist components 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -291,7 +291,7 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic k
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -305,7 +305,7 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic p
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -319,11 +319,11 @@ exports[`compiler: hoistStatic transform should NOT hoist element with dynamic r
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
-      _createVNode(\\"div\\", { ref: foo }, null, -1 /* NEED_PATCH */)
+      _createVNode(\\"div\\", { ref: foo }, null, 512 /* NEED_PATCH */)
     ]))
   }
 }"
@@ -333,7 +333,7 @@ exports[`compiler: hoistStatic transform should NOT hoist root node 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\"))
@@ -346,10 +346,10 @@ exports[`compiler: hoistStatic transform should hoist v-for children if static 1
 const { createVNode: _createVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
-const _hoisted_2 = _createVNode(\\"span\\", null, null, -2 /* HOISTED */)
+const _hoisted_2 = _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -371,10 +371,10 @@ const _hoisted_1 = {
   key: 0,
   id: \\"foo\\"
 }
-const _hoisted_2 = _createVNode(\\"span\\", null, null, -2 /* HOISTED */)
+const _hoisted_2 = _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [

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

@@ -4,7 +4,7 @@ exports[`compiler: transform text <template v-for> 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createTextVNode: _createTextVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
@@ -20,7 +20,7 @@ exports[`compiler: transform text consecutive text 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString } = _Vue
 
     return _toDisplayString(foo) + \\" bar \\" + _toDisplayString(baz)
@@ -32,7 +32,7 @@ exports[`compiler: transform text consecutive text between elements 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(_Fragment, null, [
@@ -48,7 +48,7 @@ exports[`compiler: transform text consecutive text mixed with elements 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(_Fragment, null, [
@@ -66,7 +66,7 @@ exports[`compiler: transform text no consecutive text 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { toDisplayString: _toDisplayString } = _Vue
 
     return _toDisplayString(foo)
@@ -78,7 +78,7 @@ exports[`compiler: transform text text between elements (static) 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(_Fragment, null, [

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

@@ -4,7 +4,7 @@ exports[`compiler: v-for codegen basic v-for 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
@@ -18,7 +18,7 @@ exports[`compiler: v-for codegen keyed template v-for 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
@@ -35,7 +35,7 @@ exports[`compiler: v-for codegen keyed v-for 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
@@ -49,7 +49,7 @@ exports[`compiler: v-for codegen skipped key 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => {
@@ -63,7 +63,7 @@ exports[`compiler: v-for codegen skipped value & key 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => {
@@ -77,7 +77,7 @@ exports[`compiler: v-for codegen skipped value 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => {
@@ -91,7 +91,7 @@ exports[`compiler: v-for codegen template v-for 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
@@ -108,7 +108,7 @@ exports[`compiler: v-for codegen template v-for w/ <slot/> 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
@@ -122,7 +122,7 @@ exports[`compiler: v-for codegen v-for on <slot/> 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, renderSlot: _renderSlot } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item) => {
@@ -136,13 +136,13 @@ exports[`compiler: v-for codegen v-for on element with custom directive 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives } = _Vue
 
     const _directive_foo = _resolveDirective(\\"foo\\")
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (i) => {
-      return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, -1 /* NEED_PATCH */)), [
+      return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
         [_directive_foo]
       ])
     }), 256 /* UNKEYED_FRAGMENT */))
@@ -154,7 +154,7 @@ exports[`compiler: v-for codegen v-if + v-for 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
@@ -170,7 +170,7 @@ exports[`compiler: v-for codegen value + key + index 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createVNode: _createVNode } = _Vue
 
     return (_openBlock(true), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => {

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

@@ -4,7 +4,7 @@ exports[`compiler: v-if codegen basic v-if 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
@@ -18,7 +18,7 @@ exports[`compiler: v-if codegen template v-if 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
@@ -36,7 +36,7 @@ exports[`compiler: v-if codegen template v-if w/ single <slot/> child 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
@@ -50,7 +50,7 @@ exports[`compiler: v-if codegen v-if + v-else 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
@@ -64,7 +64,7 @@ exports[`compiler: v-if codegen v-if + v-else-if + v-else 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue
 
     return ok
@@ -80,7 +80,7 @@ exports[`compiler: v-if codegen v-if + v-else-if 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
@@ -96,7 +96,7 @@ exports[`compiler: v-if codegen v-if on <slot/> 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { renderSlot: _renderSlot, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok
@@ -110,7 +110,7 @@ exports[`compiler: v-if codegen v-if with key 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode } = _Vue
 
     return ok

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

@@ -15,7 +15,7 @@ exports[`compiler: transform v-model compound expression 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"input\\", {
@@ -41,7 +41,7 @@ exports[`compiler: transform v-model simple exprssion 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"input\\", {
@@ -56,13 +56,13 @@ exports[`compiler: transform v-model with argument 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"input\\", {
       value: model,
       \\"onUpdate:value\\": $event => (model = $event)
-    }, null, 8 /* PROPS */, [\\"value\\", \\"onUpdate:value\\"]))
+    }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"value\\", \\"onUpdate:value\\"]))
   }
 }"
 `;
@@ -82,7 +82,7 @@ exports[`compiler: transform v-model with dynamic argument 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"input\\", {

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

@@ -4,7 +4,7 @@ exports[`compiler: v-once transform as root node 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { setBlockTracking: _setBlockTracking, createVNode: _createVNode } = _Vue
 
     return _cache[1] || (
@@ -21,7 +21,7 @@ exports[`compiler: v-once transform on component 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -42,7 +42,7 @@ exports[`compiler: v-once transform on nested plain element 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -61,7 +61,7 @@ exports[`compiler: v-once transform on slot outlet 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { setBlockTracking: _setBlockTracking, renderSlot: _renderSlot, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [
@@ -80,7 +80,7 @@ exports[`compiler: v-once transform with hoistStatic: true 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { setBlockTracking: _setBlockTracking, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(\\"div\\", null, [

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

@@ -10,7 +10,7 @@ return function render(_ctx, _cache) {
     [_ctx.one]: ({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)],
     [_ctx.two]: ({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)],
     _: 1
-  }, 512 /* DYNAMIC_SLOTS */))
+  }, 1024 /* DYNAMIC_SLOTS */))
 }"
 `;
 
@@ -42,7 +42,7 @@ return function render(_ctx, _cache) {
         fn: () => [_toDisplayString(name)]
       }
     })
-  ]), 512 /* DYNAMIC_SLOTS */))
+  ]), 1024 /* DYNAMIC_SLOTS */))
 }"
 `;
 
@@ -59,7 +59,7 @@ return function render(_ctx, _cache) {
           fn: (props) => [_toDisplayString(props)]
         }
       : undefined
-  ]), 512 /* DYNAMIC_SLOTS */))
+  ]), 1024 /* DYNAMIC_SLOTS */))
 }"
 `;
 
@@ -67,7 +67,7 @@ exports[`compiler: transform component slots named slot with v-if + v-else-if +
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -87,7 +87,7 @@ return function render(_ctx, _cache) {
               name: \\"one\\",
               fn: () => [\\"baz\\"]
             }
-    ]), 512 /* DYNAMIC_SLOTS */))
+    ]), 1024 /* DYNAMIC_SLOTS */))
   }
 }"
 `;
@@ -96,7 +96,7 @@ exports[`compiler: transform component slots named slot with v-if 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { resolveComponent: _resolveComponent, createSlots: _createSlots, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -108,7 +108,7 @@ return function render(_ctx, _cache) {
             fn: () => [\\"hello\\"]
           }
         : undefined
-    ]), 512 /* DYNAMIC_SLOTS */))
+    ]), 1024 /* DYNAMIC_SLOTS */))
   }
 }"
 `;
@@ -131,7 +131,7 @@ exports[`compiler: transform component slots named slots w/ implicit default slo
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, resolveComponent: _resolveComponent, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _component_Comp = _resolveComponent(\\"Comp\\")
@@ -160,7 +160,7 @@ return function render(_ctx, _cache) {
       _createVNode(_component_Inner, null, {
         default: ({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)],
         _: 1
-      }, 512 /* DYNAMIC_SLOTS */),
+      }, 1024 /* DYNAMIC_SLOTS */),
       \\" \\",
       _toDisplayString(foo),
       _toDisplayString(_ctx.bar),

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

@@ -770,6 +770,29 @@ describe('compiler: element transform', () => {
       const { node } = parseWithBind(`<div v-foo />`)
       expect(node.patchFlag).toBe(genFlagText(PatchFlags.NEED_PATCH))
     })
+
+    test('HYDRATE_EVENTS', () => {
+      // ignore click events (has dedicated fast path)
+      const { node } = parseWithElementTransform(`<div @click="foo" />`, {
+        directiveTransforms: {
+          on: transformOn
+        }
+      })
+      // should only have props flag
+      expect(node.patchFlag).toBe(genFlagText(PatchFlags.PROPS))
+
+      const { node: node2 } = parseWithElementTransform(
+        `<div @keyup="foo" />`,
+        {
+          directiveTransforms: {
+            on: transformOn
+          }
+        }
+      )
+      expect(node2.patchFlag).toBe(
+        genFlagText([PatchFlags.PROPS, PatchFlags.HYDRATE_EVENTS])
+      )
+    })
   })
 
   describe('dynamic component', () => {

packages/compiler-core/src/codegen.ts

@@ -210,7 +210,7 @@ export function generate(
   indent()
 
   if (useWithBlock) {
-    push(`with (this) {`)
+    push(`with (_ctx) {`)
     indent()
     // function mode const declarations should be inside with block
     // also they should be renamed to avoid collision with user properties

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

@@ -269,9 +269,15 @@ export function buildProps(
   const analyzePatchFlag = ({ key, value }: Property) => {
     if (key.type === NodeTypes.SIMPLE_EXPRESSION && key.isStatic) {
       const name = key.content
-      if (!isComponent && isOn(name) && name.toLowerCase() !== 'onclick') {
-        // This flag is for hydrating event handlers only. We omit the flag for
-        // click handlers becaues hydration gives click dedicated fast path.
+      if (
+        !isComponent &&
+        isOn(name) &&
+        // omit the flag for click handlers becaues hydration gives click
+        // dedicated fast path.
+        name.toLowerCase() !== 'onclick' &&
+        // omit v-model handlers
+        name !== 'onUpdate:modelValue'
+      ) {
         hasHydrationEventBinding = true
       }
       if (
@@ -289,7 +295,7 @@ export function buildProps(
         hasClassBinding = true
       } else if (name === 'style') {
         hasStyleBinding = true
-      } else if (name !== 'key') {
+      } else if (name !== 'key' && !dynamicPropNames.includes(name)) {
         dynamicPropNames.push(name)
       }
     } else {
@@ -447,8 +453,11 @@ export function buildProps(
       patchFlag |= PatchFlags.HYDRATE_EVENTS
     }
   }
-  if (patchFlag === 0 && (hasRef || runtimeDirectives.length > 0)) {
-    patchFlag = PatchFlags.NEED_PATCH
+  if (
+    (patchFlag === 0 || patchFlag === PatchFlags.HYDRATE_EVENTS) &&
+    (hasRef || runtimeDirectives.length > 0)
+  ) {
+    patchFlag |= PatchFlags.NEED_PATCH
   }
 
   return {

packages/compiler-dom/__tests__/__snapshots__/index.spec.ts.snap

@@ -7,7 +7,7 @@ const { createVNode: _createVNode } = _Vue
 const _hoisted_1 = {}
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return (_openBlock(), _createBlock(_Fragment, null, [

packages/compiler-dom/__tests__/transforms/__snapshots__/vModel.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", _mergeProps(obj, {
@@ -21,7 +21,7 @@ exports[`compiler: transform v-model input w/ dynamic v-bind 2`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _directive_bind = _resolveDirective(\\"bind\\")
@@ -41,7 +41,7 @@ exports[`compiler: transform v-model modifiers .lazy 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
@@ -63,7 +63,7 @@ exports[`compiler: transform v-model modifiers .number 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
@@ -85,7 +85,7 @@ exports[`compiler: transform v-model modifiers .trim 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
@@ -107,7 +107,7 @@ exports[`compiler: transform v-model simple expression 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
@@ -124,7 +124,7 @@ exports[`compiler: transform v-model simple expression for input (checkbox) 1`]
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelCheckbox: _vModelCheckbox, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
@@ -142,7 +142,7 @@ exports[`compiler: transform v-model simple expression for input (dynamic type)
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelDynamic: _vModelDynamic, resolveDirective: _resolveDirective, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     const _directive_bind = _resolveDirective(\\"bind\\")
@@ -162,7 +162,7 @@ exports[`compiler: transform v-model simple expression for input (radio) 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelRadio: _vModelRadio, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
@@ -180,7 +180,7 @@ exports[`compiler: transform v-model simple expression for input (text) 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
@@ -198,7 +198,7 @@ exports[`compiler: transform v-model simple expression for select 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelSelect: _vModelSelect, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"select\\", {
@@ -215,7 +215,7 @@ exports[`compiler: transform v-model simple expression for textarea 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vModelText: _vModelText, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
     return _withDirectives((_openBlock(), _createBlock(\\"textarea\\", {

packages/compiler-dom/__tests__/transforms/__snapshots__/vShow.spec.ts.snap

@@ -4,10 +4,10 @@ exports[`compiler: v-show transform simple expression 1`] = `
 "const _Vue = Vue
 
 return function render(_ctx, _cache) {
-  with (this) {
+  with (_ctx) {
     const { vShow: _vShow, createVNode: _createVNode, withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue
 
-    return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, -1 /* NEED_PATCH */)), [
+    return _withDirectives((_openBlock(), _createBlock(\\"div\\", null, null, 512 /* NEED_PATCH */)), [
       [_vShow, a]
     ])
   }

packages/compiler-dom/__tests__/transforms/vOn.spec.ts

@@ -11,7 +11,11 @@ import { transformOn } from '../../src/transforms/vOn'
 import { V_ON_WITH_MODIFIERS, V_ON_WITH_KEYS } from '../../src/runtimeHelpers'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
 import { transformExpression } from '../../../compiler-core/src/transforms/transformExpression'
-import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
+import {
+  createObjectMatcher,
+  genFlagText
+} from '../../../compiler-core/__tests__/testUtils'
+import { PatchFlags } from '@vue/shared'
 
 function parseWithVOn(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
@@ -157,8 +161,11 @@ describe('compiler-dom: transform v-on', () => {
       cacheHandlers: true
     })
     expect(root.cached).toBe(1)
-    // should not treat cached handler as dynamicProp, so no flags
-    expect((root as any).children[0].codegenNode.patchFlag).toBeUndefined()
+    // should not treat cached handler as dynamicProp, so it should have no
+    // dynamicProps flags and only the hydration flag
+    expect((root as any).children[0].codegenNode.patchFlag).toBe(
+      genFlagText(PatchFlags.HYDRATE_EVENTS)
+    )
     expect(prop.value).toMatchObject({
       type: NodeTypes.JS_CACHE_EXPRESSION,
       index: 1,

packages/runtime-core/__tests__/vnode.spec.ts

@@ -8,6 +8,7 @@ import {
 } from '@vue/runtime-core'
 import { mergeProps, normalizeVNode } from '../src/vnode'
 import { Data } from '../src/component'
+import { PatchFlags } from '@vue/shared'
 
 describe('vnode', () => {
   test('create with just tag', () => {
@@ -238,22 +239,32 @@ describe('vnode', () => {
       const vnode = (openBlock(),
       createBlock('div', null, [
         hoist,
-        (vnode1 = createVNode('div', null, 'text', 1 /* TEXT */))
+        (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT))
       ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1])
     })
 
+    test('should not track vnodes with only HYDRATE_EVENTS flag', () => {
+      const hoist = createVNode('div')
+      const vnode = (openBlock(),
+      createBlock('div', null, [
+        hoist,
+        createVNode('div', null, 'text', PatchFlags.HYDRATE_EVENTS)
+      ]))
+      expect(vnode.dynamicChildren).toStrictEqual([])
+    })
+
     test('many times call openBlock', () => {
       const hoist = createVNode('div')
       let vnode1, vnode2, vnode3
       const vnode = (openBlock(),
       createBlock('div', null, [
         hoist,
-        (vnode1 = createVNode('div', null, 'text', 1 /* TEXT */)),
+        (vnode1 = createVNode('div', null, 'text', PatchFlags.TEXT)),
         (vnode2 = (openBlock(),
         createBlock('div', null, [
           hoist,
-          (vnode3 = createVNode('div', null, 'text', 1 /* TEXT */))
+          (vnode3 = createVNode('div', null, 'text', PatchFlags.TEXT))
         ])))
       ]))
       expect(vnode.dynamicChildren).toStrictEqual([vnode1, vnode2])

packages/runtime-core/src/componentRenderUtils.ts

@@ -58,8 +58,11 @@ export function renderComponentRoot(
   }
   try {
     if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+      // withProxy is a proxy with a diffrent `has` trap only for
+      // runtime-compiled render functions using `with` block.
+      const proxyToUse = withProxy || proxy
       result = normalizeVNode(
-        instance.render!.call(withProxy || proxy, proxy, renderCache)
+        instance.render!.call(proxyToUse, proxyToUse, renderCache)
       )
     } else {
       // functional

packages/runtime-core/src/vnode.ts

@@ -279,10 +279,9 @@ export function createVNode(
     shouldTrack > 0 &&
     currentBlock !== null &&
     // the EVENTS flag is only for hydration and if it is the only flag, the
-    // vnode should not be considered dynamic.
+    // vnode should not be considered dynamic due to handler caching.
     patchFlag !== PatchFlags.HYDRATE_EVENTS &&
     (patchFlag > 0 ||
-      patchFlag === PatchFlags.NEED_PATCH ||
       shapeFlag & ShapeFlags.SUSPENSE ||
       shapeFlag & ShapeFlags.STATEFUL_COMPONENT ||
       shapeFlag & ShapeFlags.FUNCTIONAL_COMPONENT)

packages/shared/src/patchFlags.ts

@@ -53,10 +53,16 @@ export const enum PatchFlags {
   // Indicates a fragment with unkeyed children.
   UNKEYED_FRAGMENT = 1 << 8,
 
+  // Indicates an element that only needs non-props patching, e.g. ref or
+  // directives (onVnodeXXX hooks). since every patched vnode checks for refs
+  // and onVnodeXXX hooks, itt simply marks the vnode so that a parent block
+  // will track it.
+  NEED_PATCH = 1 << 9,
+
   // Indicates a component with dynamic slots (e.g. slot that references a v-for
   // iterated value, or dynamic slot names).
   // Components with this flag are always force updated.
-  DYNAMIC_SLOTS = 1 << 9,
+  DYNAMIC_SLOTS = 1 << 10,
 
   // SPECIAL FLAGS -------------------------------------------------------------
 
@@ -65,21 +71,15 @@ export const enum PatchFlags {
   // patchFlag > 0), and are mutually exclusive. When checking for a speical
   // flag, simply check patchFlag === FLAG.
 
-  // Indicates an element that only needs non-props patching, e.g. ref or
-  // directives (onVnodeXXX hooks). since every patched vnode checks for refs
-  // and onVnodeXXX hooks, itt simply marks the vnode so that a parent block
-  // will track it.
-  NEED_PATCH = -1,
-
   // Indicates a hoisted static vnode. This is a hint for hydration to skip
   // the entire sub tree since static content never needs to be updated.
-  HOISTED = -2,
+  HOISTED = -1,
 
   // A special flag that indicates that the diffing algorithm should bail out
   // of optimized mode. This is only on block fragments created by renderSlot()
   // when encountering non-compiler generated slots (i.e. manually written
   // render functions, which should always be fully diffed)
-  BAIL = -3
+  BAIL = -2
 }
 
 // runtime object for public consumption