feat: basic implementation of v-memo for dom

[baiwusanyu-c]

This PR implements the v-memo directive function on the dom. No tests have been added yet because I am not sure whether this implementation is elegant. Maybe I need some guidance.

[autofix-troubleshooter]

Hi! I'm the autofix.ci troubleshooter bot.

It looks like you correctly set up a CI job that uses the autofix.ci GitHub Action, but the autofix.ci GitHub App has not been installed for this repository. This means that autofix.ci unfortunately does not have the permissions to fix this pull request. If you are the repository owner, please install the app and then restart the CI workflow! 😃

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	87.9 kB	33.5 kB	30.2 kB
runtime-vapor.global.prod.js	15 kB (+252 B)	5.59 kB (+106 B)	5.1 kB (+98 B)
vue-vapor.global.prod.js	44.5 kB (+884 B)	14.6 kB (+312 B)	13.3 kB (+294 B)
vue.global.prod.js	144 kB	52.4 kB	46.9 kB

Usages

Name	Size	Gzip	Brotli
createApp	48.6 kB	19.1 kB	17.4 kB
createSSRApp	51.8 kB	20.3 kB	18.6 kB
defineCustomElement	50.9 kB	19.8 kB	18.1 kB
vapor	15 kB (+246 B)	5.58 kB (+97 B)	5.11 kB (+87 B)
overall	61.9 kB	23.9 kB	21.8 kB

[baiwusanyu-c]

<script setup lang="ts">
import { ref, computed } from 'vue'
const count = ref(1)
const html = computed(() => `<button>HTML!</button>`)
const handleClick = () => {
  count.value++
}
// @ts-expect-error
globalThis.count = count
// @ts-expect-error
globalThis.html = html
// @ts-expect-error
globalThis.handleClick = handleClick
</script>

<template>
  <div v-memo="[html]" @click="handleClick">
    <div>The number is {{ count }}.</div>
    <div v-memo="[count]">
      {{ count }}
    </div>
  </div>
</template>

[baiwusanyu-c]

import { defineComponent as _defineComponent } from "vue";
import { ref, computed } from "vue";
const _sfc_main = /* @__PURE__ */ _defineComponent({
  __name: "App",
  setup(__props, { expose: __expose }) {
    __expose();
    const count2 = ref(1);
    const html2 = computed(() => `<button>HTML!</button>`);
    const handleClick2 = () => {
      count2.value++;
    };
    globalThis.count = count2;
    globalThis.html = html2;
    globalThis.handleClick = handleClick2;
    const __returned__ = { count: count2, html: html2, handleClick: handleClick2 };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});
import { template, children, createTextNode, insert, effect, on, withMemo, setText } from "vue/vapor";
const t0 = template("<div><div>The number is <!>.</div><div></div></div>");
function _sfc_render() {
  const _memoCache = [];
  const n0 = t0();
  const { 0: [n1, { 0: [n4, { 1: [n3] }], 1: [n5] }] } = children(n0);
  const n2 = createTextNode(count.value);
  insert(n2, n4, n3);
  effect(() => {
    on(n1, "click", handleClick);
  });
  effect(() => {
    withMemo([html.value], () => {
      setText(n2, void 0, count.value);
    }, _memoCache, -1);
    withMemo([count.value], () => {
      setText(n5, void 0, count.value);
    }, _memoCache, 0);
  });
  return n0;
}

[sxzz]

Please create an issue before feature contributing. Track #18