refactor(compiler-sfc): use shallowRef for ref sugar destructure

Author: yyx990803

packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap

@@ -74,16 +74,16 @@ return { a, get }
 `;
 
 exports[`<script setup> ref sugar array destructure 1`] = `
-"import { ref as _ref } from 'vue'
+"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
 
 export default {
   setup(__props, { expose }) {
   expose()
 
     let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())
-const a = _ref(__a);
-const b = _ref(__b);
-const c = _ref(__c);
+const a = _shallowRef(__a);
+const b = _shallowRef(__b);
+const c = _shallowRef(__c);
     console.log(n.value, a.value, b.value, c.value)
     
 return { n, a, b, c }
@@ -149,17 +149,17 @@ return { a, b, inc }
 `;
 
 exports[`<script setup> ref sugar nested destructure 1`] = `
-"import { ref as _ref } from 'vue'
+"import { shallowRef as _shallowRef } from 'vue'
 
 export default {
   setup(__props, { expose }) {
   expose()
 
     let [{ a: { b: __b }}] = (useFoo())
-const b = _ref(__b);
+const b = _shallowRef(__b);
     let { c: [__d, __e] } = (useBar())
-const d = _ref(__d);
-const e = _ref(__e);
+const d = _shallowRef(__d);
+const e = _shallowRef(__e);
     console.log(b.value, d.value, e.value)
     
 return { b, d, e }
@@ -169,20 +169,20 @@ return { b, d, e }
 `;
 
 exports[`<script setup> ref sugar object destructure 1`] = `
-"import { ref as _ref } from 'vue'
+"import { ref as _ref, shallowRef as _shallowRef } from 'vue'
 
 export default {
   setup(__props, { expose }) {
   expose()
 
     let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())
-const a = _ref(__a);
-const c = _ref(__c);
-const d = _ref(__d);
-const f = _ref(__f);
-const g = _ref(__g);
+const a = _shallowRef(__a);
+const c = _shallowRef(__c);
+const d = _shallowRef(__d);
+const f = _shallowRef(__f);
+const g = _shallowRef(__g);
     let { foo: __foo } = (useSomthing(() => 1));
-const foo = _ref(__foo);
+const foo = _shallowRef(__foo);
     console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)
     
 return { n, a, c, d, f, g, foo }

packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts

@@ -184,14 +184,14 @@ describe('<script setup> ref sugar', () => {
       `let n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = (useFoo())`
     )
     expect(content).toMatch(`let { foo: __foo } = (useSomthing(() => 1))`)
-    expect(content).toMatch(`\nconst a = _ref(__a);`)
-    expect(content).not.toMatch(`\nconst b = _ref(__b);`)
-    expect(content).toMatch(`\nconst c = _ref(__c);`)
-    expect(content).toMatch(`\nconst d = _ref(__d);`)
-    expect(content).not.toMatch(`\nconst e = _ref(__e);`)
-    expect(content).toMatch(`\nconst f = _ref(__f);`)
-    expect(content).toMatch(`\nconst g = _ref(__g);`)
-    expect(content).toMatch(`\nconst foo = _ref(__foo);`)
+    expect(content).toMatch(`\nconst a = _shallowRef(__a);`)
+    expect(content).not.toMatch(`\nconst b = _shallowRef(__b);`)
+    expect(content).toMatch(`\nconst c = _shallowRef(__c);`)
+    expect(content).toMatch(`\nconst d = _shallowRef(__d);`)
+    expect(content).not.toMatch(`\nconst e = _shallowRef(__e);`)
+    expect(content).toMatch(`\nconst f = _shallowRef(__f);`)
+    expect(content).toMatch(`\nconst g = _shallowRef(__g);`)
+    expect(content).toMatch(`\nconst foo = _shallowRef(__foo);`)
     expect(content).toMatch(
       `console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)`
     )
@@ -216,9 +216,9 @@ describe('<script setup> ref sugar', () => {
     expect(content).toMatch(
       `let n = _ref(1), [__a, __b = 1, ...__c] = (useFoo())`
     )
-    expect(content).toMatch(`\nconst a = _ref(__a);`)
-    expect(content).toMatch(`\nconst b = _ref(__b);`)
-    expect(content).toMatch(`\nconst c = _ref(__c);`)
+    expect(content).toMatch(`\nconst a = _shallowRef(__a);`)
+    expect(content).toMatch(`\nconst b = _shallowRef(__b);`)
+    expect(content).toMatch(`\nconst c = _shallowRef(__c);`)
     expect(content).toMatch(`console.log(n.value, a.value, b.value, c.value)`)
     expect(content).toMatch(`return { n, a, b, c }`)
     expect(bindings).toStrictEqual({
@@ -238,11 +238,11 @@ describe('<script setup> ref sugar', () => {
     </script>`)
     expect(content).toMatch(`let [{ a: { b: __b }}] = (useFoo())`)
     expect(content).toMatch(`let { c: [__d, __e] } = (useBar())`)
-    expect(content).not.toMatch(`\nconst a = _ref(__a);`)
-    expect(content).not.toMatch(`\nconst c = _ref(__c);`)
-    expect(content).toMatch(`\nconst b = _ref(__b);`)
-    expect(content).toMatch(`\nconst d = _ref(__d);`)
-    expect(content).toMatch(`\nconst e = _ref(__e);`)
+    expect(content).not.toMatch(`\nconst a = _shallowRef(__a);`)
+    expect(content).not.toMatch(`\nconst c = _shallowRef(__c);`)
+    expect(content).toMatch(`\nconst b = _shallowRef(__b);`)
+    expect(content).toMatch(`\nconst d = _shallowRef(__d);`)
+    expect(content).toMatch(`\nconst e = _shallowRef(__e);`)
     expect(content).toMatch(`return { b, d, e }`)
     expect(bindings).toStrictEqual({
       b: BindingTypes.SETUP_REF,

packages/compiler-sfc/src/compileScript.ts

@@ -643,7 +643,7 @@ export function compileScript(
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + startOffset,
-          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
+          `\nconst ${nameId.name} = ${helper('shallowRef')}(__${nameId.name});`
         )
       }
     }
@@ -677,7 +677,7 @@ export function compileScript(
         // append binding declarations after the parent statement
         s.appendLeft(
           statement.end! + startOffset,
-          `\nconst ${nameId.name} = ${helper('ref')}(__${nameId.name});`
+          `\nconst ${nameId.name} = ${helper('shallowRef')}(__${nameId.name});`
         )
       }
     }

packages/runtime-core/src/helpers/refMacros.ts renamed to packages/runtime-core/src/helpers/refSugar.ts

@@ -352,6 +352,6 @@ export const compatUtils = (
   __COMPAT__ ? _compatUtils : null
 ) as typeof _compatUtils
 
-// Ref macros ------------------------------------------------------------------
+// Ref sugar macros ------------------------------------------------------------
 // for dts generation only
-export { $ref, $computed, $raw, $fromRefs } from './helpers/refMacros'
+export { $ref, $computed, $raw, $fromRefs } from './helpers/refSugar'