fix(compiler-vapor): improve expression caching for shared member roots

Author: edison1105

packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap

@@ -238,6 +238,22 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`cache multiple access > shared member root 1`] = `
+"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div></div>")
+
+export function render(_ctx) {
+  const n0 = t0()
+  const n1 = t0()
+  _renderEffect(() => {
+    const _foo = _ctx.foo
+    _setProp(n0, "id", _foo.bar)
+    _setProp(n1, "id", _foo.baz)
+  })
+  return [n0, n1]
+}"
+`;
+
 exports[`cache multiple access > variable name substring edge cases 1`] = `
 "import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>", true)

packages/compiler-vapor/__tests__/transforms/vBind.spec.ts

@@ -853,6 +853,17 @@ describe('cache multiple access', () => {
     expect(code).contains('_setProp(n0, "id", _obj.foo + _obj.bar)')
   })
 
+  test('shared member root', () => {
+    const { code } = compileWithVBind(`
+        <div :id="foo.bar"></div>
+        <div :id="foo.baz"></div>
+      `)
+    expect(code).matchSnapshot()
+    expect(code).contains('const _foo = _ctx.foo')
+    expect(code).contains('_setProp(n0, "id", _foo.bar)')
+    expect(code).contains('_setProp(n1, "id", _foo.baz)')
+  })
+
   test('not cache variable only used in property shorthand', () => {
     const { code } = compileWithVBind(`
         <div :style="{color}" />

packages/compiler-vapor/src/generators/expression.ts

@@ -492,10 +492,10 @@ function shouldDeclareVariable(
     }
     return true
   }
-  // if arrays share common elements, no declaration needed
-  // because they will be treat as repeated expressions
+  // if arrays are identical, no declaration needed
+  // because they will be treated as repeated expressions
   // e.g., [[foo,bar],[foo,bar]] -> const foo_bar = _ctx.foo + _ctx.bar
-  if (vars.some(v => v.some(e => first.includes(e)))) {
+  if (vars.every(v => v.every((e, idx) => e === first[idx]))) {
     return false
   }