Skip to content
This repository was archived by the owner on Jul 19, 2025. It is now read-only.

Commit cc58f65

Browse files
sxzzsxzz
committed
refactor(compiler-vapor): remove proxyRefs in v-for
1 parent e1bedb8 commit cc58f65

File tree

5 files changed

+40
-42
lines changed

5 files changed

+40
-42
lines changed

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const t0 = _template("<div></div>")
77
export function render(_ctx) {
88
const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => {
99
const n2 = t0()
10-
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
10+
_renderEffect(() => _setText(n2, _ctx0[0].value + _ctx0[1].value + _ctx0[2].value))
1111
return n2
1212
}), ([id, ...other], index) => (id))
1313
return n0
@@ -22,8 +22,8 @@ _delegateEvents("click")
2222
export function render(_ctx) {
2323
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
2424
const n2 = t0()
25-
_delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0])))
26-
_renderEffect(() => _setText(n2, _ctx0[0]))
25+
_delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0].value)))
26+
_renderEffect(() => _setText(n2, _ctx0[0].value))
2727
return n2
2828
}, (item) => (item.id))
2929
return n0
@@ -51,8 +51,8 @@ const t0 = _template("<div></div>")
5151
export function render(_ctx) {
5252
const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
5353
const n2 = t0()
54-
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0]))
55-
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1]))
54+
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value))
55+
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value))
5656
return n2
5757
})
5858
return n0
@@ -67,9 +67,9 @@ const t1 = _template("<div></div>")
6767
export function render(_ctx) {
6868
const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
6969
const n5 = t1()
70-
const n2 = _createFor(() => (_ctx0[0]), (_ctx1) => {
70+
const n2 = _createFor(() => (_ctx0[0].value), (_ctx1) => {
7171
const n4 = t0()
72-
_renderEffect(() => _setText(n4, _ctx1[0]+_ctx0[0]))
72+
_renderEffect(() => _setText(n4, _ctx1[0].value+_ctx0[0].value))
7373
return n4
7474
})
7575
_insert(n2, n5)
@@ -86,7 +86,7 @@ const t0 = _template("<div></div>")
8686
export function render(_ctx) {
8787
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => {
8888
const n2 = t0()
89-
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2]))
89+
_renderEffect(() => _setText(n2, _ctx0[0].value + _ctx0[1].value + _ctx0[2].value))
9090
return n2
9191
}), ({ id, ...other }, index) => (id))
9292
return n0
@@ -100,7 +100,7 @@ const t0 = _template("<div></div>")
100100
export function render(_ctx) {
101101
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => {
102102
const n2 = t0()
103-
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux))
103+
_renderEffect(() => _setText(n2, _ctx0[0].value + _ctx.bar + _ctx.baz + _ctx0[1].value + _ctx.quux))
104104
return n2
105105
}))
106106
return n0

‎packages/compiler-vapor/__tests__/transforms/vFor.spec.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@ describe('compiler: v-for', () => {
9393
)
9494
expect(code).matchSnapshot()
9595
expect(code).contains(`_createFor(() => (_ctx.list), (_ctx0) => {`)
96-
expect(code).contains(`_createFor(() => (_ctx0[0]), (_ctx1) => {`)
97-
expect(code).contains(`_ctx1[0]+_ctx0[0]`)
96+
expect(code).contains(`_createFor(() => (_ctx0[0].value), (_ctx1) => {`)
97+
expect(code).contains(`_ctx1[0].value+_ctx0[0].value`)
9898
expect(ir.template).toEqual(['<span></span>', '<div></div>'])
9999
expect(ir.block.operation).toMatchObject([
100100
{
@@ -130,7 +130,7 @@ describe('compiler: v-for', () => {
130130
)
131131
expect(code).matchSnapshot()
132132
expect(code).contains(`([{ id, ...other }, index]) => [id, other, index]`)
133-
expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
133+
expect(code).contains(`_ctx0[0].value + _ctx0[1].value + _ctx0[2].value`)
134134
expect(ir.block.operation[0]).toMatchObject({
135135
type: IRNodeTypes.FOR,
136136
source: {
@@ -163,7 +163,7 @@ describe('compiler: v-for', () => {
163163
)
164164
expect(code).matchSnapshot()
165165
expect(code).contains(`([[id, ...other], index]) => [id, other, index]`)
166-
expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`)
166+
expect(code).contains(`_ctx0[0].value + _ctx0[1].value + _ctx0[2]`)
167167
expect(ir.block.operation[0]).toMatchObject({
168168
type: IRNodeTypes.FOR,
169169
source: {
@@ -199,7 +199,7 @@ describe('compiler: v-for', () => {
199199
expect(code).matchSnapshot()
200200
expect(code).contains(`([{ foo = bar, baz: [qux = quux] }]) => [foo, qux]`)
201201
expect(code).contains(
202-
`_ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux`,
202+
`_ctx0[0].value + _ctx.bar + _ctx.baz + _ctx0[1].value + _ctx.quux`,
203203
)
204204
expect(ir.block.operation[0]).toMatchObject({
205205
type: IRNodeTypes.FOR,

‎packages/compiler-vapor/src/generators/for.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ export function genFor(
4747
if (context.options.prefixIdentifiers) {
4848
propsName = `_ctx${depth}`
4949
Array.from(idsOfValue).forEach(
50-
(id, idIndex) => (idMap[id] = `${propsName}[${idIndex}]`),
50+
(id, idIndex) => (idMap[id] = `${propsName}[${idIndex}].value`),
5151
)
52-
if (rawKey) idMap[rawKey] = `${propsName}[${idsOfValue.size}]`
53-
if (rawIndex) idMap[rawIndex] = `${propsName}[${idsOfValue.size + 1}]`
52+
if (rawKey) idMap[rawKey] = `${propsName}[${idsOfValue.size}].value`
53+
if (rawIndex) idMap[rawIndex] = `${propsName}[${idsOfValue.size + 1}].value`
5454
} else {
5555
propsName = `[${[rawValue || ((rawKey || rawIndex) && '_'), rawKey || (rawIndex && '__'), rawIndex].filter(Boolean).join(', ')}]`
5656
}

‎packages/runtime-vapor/__tests__/for.spec.ts

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('createFor', () => {
2828
state => {
2929
const span = document.createElement('li')
3030
renderEffect(() => {
31-
const [item, key, index] = state
31+
const [{ value: item }, { value: key }, { value: index }] = state
3232
span.innerHTML = `${key}. ${item.name}`
3333

3434
// index should be undefined if source is not an object
@@ -94,11 +94,11 @@ describe('createFor', () => {
9494
state => {
9595
const span = document.createElement('li')
9696
renderEffect(() => {
97-
const [item, key, index] = state
97+
const [{ value: item }, { value: key }, index] = state
9898
span.innerHTML = `${key}. ${item}`
9999

100100
// index should be undefined if source is not an object
101-
expect(index).toBe(undefined)
101+
expect(index.value).toBe(undefined)
102102
})
103103
return span
104104
},
@@ -139,7 +139,7 @@ describe('createFor', () => {
139139
state => {
140140
const span = document.createElement('li')
141141
renderEffect(() => {
142-
const [item, key, index] = state
142+
const [{ value: item }, { value: key }, { value: index }] = state
143143
span.innerHTML = `${key}${index}. ${item}`
144144
expect(index).not.toBe(undefined)
145145
})
@@ -319,23 +319,22 @@ describe('createFor', () => {
319319
const { host } = define(() => {
320320
const n1 = createFor(
321321
() => list.value,
322-
withDestructure(
323-
state => {
324-
const [{ name }, key, index] = state
325-
return [name, key, index]
326-
},
327-
state => {
328-
const span = document.createElement('li')
329-
renderEffect(() => {
330-
const [name, key, index] = state
331-
span.innerHTML = `${key}. ${name}`
332-
333-
// index should be undefined if source is not an object
334-
expect(index).toBe(undefined)
335-
})
336-
return span
337-
},
338-
),
322+
state => {
323+
const span = document.createElement('li')
324+
renderEffect(() => {
325+
const [
326+
{
327+
value: { name },
328+
},
329+
{ value: key },
330+
index,
331+
] = state
332+
span.innerHTML = `${key}. ${name}`
333+
// index should be undefined if source is not an object
334+
expect(index.value).toBe(undefined)
335+
})
336+
return span
337+
},
339338
item => item.name,
340339
)
341340
return n1
@@ -398,7 +397,7 @@ describe('createFor', () => {
398397
state => {
399398
const span = document.createElement('li')
400399
renderEffect(() => {
401-
const [item, key, index] = state
400+
const [{ value: item }, { value: key }, { value: index }] = state
402401
span.innerHTML = `${key}. ${item.name}`
403402

404403
// index should be undefined if source is not an object

‎packages/runtime-vapor/src/apiCreateFor.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
type ShallowRef,
44
effectScope,
55
isReactive,
6-
proxyRefs,
76
shallowRef,
87
triggerRef,
98
} from '@vue/reactivity'
@@ -37,7 +36,7 @@ type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>
3736
/*! #__NO_SIDE_EFFECTS__ */
3837
export const createFor = (
3938
src: () => Source,
40-
renderItem: (block: any) => Block,
39+
renderItem: (block: ForBlock['state']) => Block,
4140
getKey?: (item: any, key: any, index?: number) => any,
4241
getMemo?: (item: any, key: any, index?: number) => any[],
4342
hydrationNode?: Node,
@@ -265,7 +264,7 @@ export const createFor = (
265264
memo: getMemo && getMemo(item, key, index),
266265
[fragmentKey]: true,
267266
})
268-
block.nodes = scope.run(() => renderItem(proxyRefs(state)))!
267+
block.nodes = scope.run(() => renderItem(state))!
269268

270269
// TODO v-memo
271270
// if (getMemo) block.update()

0 commit comments

Comments
 (0)