Merge branch 'update-vue-vapor' of https://github.com/sxzz/js-framewo…

…rk-benchmark into sxzz-update-vue-vapor

frameworks/keyed/vue-vapor/package.json

@@ -13,11 +13,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "npm:@vue-vapor/vue@latest"
+    "vue": "https://pkg.pr.new/vuejs/core-vapor/vue@e07eac9"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@latest",
-    "vite": "^5.2.9",
-    "vite-plugin-inspect": "^0.8.5"
+    "@vitejs/plugin-vue": "https://pkg.pr.new/@vitejs/plugin-vue@d8e849f",
+    "vite": "^5.4.6"
   }
 }

frameworks/keyed/vue-vapor/src/App.vue

@@ -1,5 +1,6 @@
 <script setup vapor>
-import { ref, shallowRef, triggerRef, watch } from "vue";
+import { ref, shallowRef, triggerRef } from "vue";
+import { createSelector } from "vue/vapor";
 import { buildData } from "./data";
 
 const selected = ref();
@@ -51,20 +52,11 @@ function swapRows() {
     const d998 = _rows[998];
     _rows[1] = d998;
     _rows[998] = d1;
-    triggerRef(rows)
+    triggerRef(rows);
   }
 }
 
-// Reduce the complexity of `selected` from O(n) to O(1).
-function createSelector(source) {
-  const cache = {}
-  watch(source, (val, old) => {
-    if (old != undefined) cache[old].value = false
-    if (val != undefined) cache[val].value = true
-  })
-  return id => (cache[id] ??= shallowRef(false)).value
-}
-const isSelected = createSelector(selected)
+const isSelected = createSelector(selected);
 </script>
 
 <template>
@@ -103,7 +95,13 @@ const isSelected = createSelector(selected)
   </div>
   <table class="table table-hover table-striped test-data">
     <tbody>
-      <tr v-for="row of rows" :key="row.id" :class="{ danger: isSelected(row.id) }" :data-label="row.label">
+      <tr
+        v-for="row of rows"
+        :key="row.id"
+        :class="{ danger: isSelected(row.id) }"
+        :data-label="row.label.value"
+        v-memo="[row.label.value, row.id === selected]"
+      >
         <td class="col-md-1">{{ row.id }}</td>
         <td class="col-md-4">
           <a @click="select(row.id)">{{ row.label.value }}</a>

frameworks/keyed/vue-vapor/vite.config.js

@@ -1,9 +1,8 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import Inspect from 'vite-plugin-inspect'
 
 export default defineConfig({
-  plugins: [vue(), Inspect()],
+  plugins: [vue()],
   build: {
     rollupOptions: {
       input: "src/main.js",