vue3模板编译

• withKeys
• withModifiers
• 触发render机制

@keyup.enter

• vue

<div @keyup.enter>Hello World</div>

• js

import { withKeys as _withKeys, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", {
    onKeyup: _withKeys(() => {}, ["enter"])
  }, "Hello World", 40 /* PROPS, HYDRATE_EVENTS */, ["onKeyup"]))
}

// Check the console for the AST

@click.ctrl

result['onClick'] = result['onClickNative'] = [function (e: PointerEvent) {
  }, withModifiers(() => {
    // 原始点击事件
    if (clickHandler && typeof clickHandler == "function") {
      clickHandler.bind(that)();
    }
  }, ['alt'])];

render执行规律

<div id="demo">
  <el-box>
    <el-input v-model="msg"></el-input>
    <el-button text="button">abc</el-button>
  </el-box>
</div>

当msg发生变化时，导致ElInput重新渲染，理论将对ElButton没有影响，但是由于ElButton存在子节点，因此会导致
ElButton的render函数执行。