root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 8 Packages Projects Releases Wiki Activity

refactor(compiler-vapor): remove `proxyRefs` in v-for

This commit is contained in:
三咲智子 Kevin Deng 2024-09-19 01:17:16 +08:00
parent e1bedb8ad0
commit cc58f651e1
No known key found for this signature in database
5 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View File

@ -7,7 +7,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => { const n0 = _createFor(() => (_ctx.list), _withDestructure(([[id, ...other], index]) => [id, other, index], (_ctx0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2])) _renderEffect(() => _setText(n2, _ctx0[0].value + _ctx0[1].value + _ctx0[2].value))
return n2 return n2
}), ([id, ...other], index) => (id)) }), ([id, ...other], index) => (id))
return n0 return n0
@ -22,8 +22,8 @@ _delegateEvents("click")
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => { const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n2 = t0() const n2 = t0()
_delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0]))) _delegate(n2, "click", () => $event => (_ctx.remove(_ctx0[0].value)))
_renderEffect(() => _setText(n2, _ctx0[0])) _renderEffect(() => _setText(n2, _ctx0[0].value))
return n2 return n2
}, (item) => (item.id)) }, (item) => (item.id))
return n0 return n0
@ -51,8 +51,8 @@ const t0 = _template("<div></div>")
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_ctx0) => { const n0 = _createFor(() => (_ctx.items), (_ctx0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0])) _renderEffect(() => _setDynamicProp(n2, "item", _ctx0[0].value))
_renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1])) _renderEffect(() => _setDynamicProp(n2, "index", _ctx0[1].value))
return n2 return n2
}) })
return n0 return n0
@ -67,9 +67,9 @@ const t1 = _template("<div></div>")
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_ctx0) => { const n0 = _createFor(() => (_ctx.list), (_ctx0) => {
const n5 = t1() const n5 = t1()
const n2 = _createFor(() => (_ctx0[0]), (_ctx1) => { const n2 = _createFor(() => (_ctx0[0].value), (_ctx1) => {
const n4 = t0() const n4 = t0()
_renderEffect(() => _setText(n4, _ctx1[0]+_ctx0[0])) _renderEffect(() => _setText(n4, _ctx1[0].value+_ctx0[0].value))
return n4 return n4
}) })
_insert(n2, n5) _insert(n2, n5)
@ -86,7 +86,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => { const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ id, ...other }, index]) => [id, other, index], (_ctx0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx0[1] + _ctx0[2])) _renderEffect(() => _setText(n2, _ctx0[0].value + _ctx0[1].value + _ctx0[2].value))
return n2 return n2
}), ({ id, ...other }, index) => (id)) }), ({ id, ...other }, index) => (id))
return n0 return n0
@ -100,7 +100,7 @@ const t0 = _template("<div></div>")
export function render(_ctx) { export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => { const n0 = _createFor(() => (_ctx.list), _withDestructure(([{ foo = bar, baz: [qux = quux] }]) => [foo, qux], (_ctx0) => {
const n2 = t0() const n2 = t0()
_renderEffect(() => _setText(n2, _ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux)) _renderEffect(() => _setText(n2, _ctx0[0].value + _ctx.bar + _ctx.baz + _ctx0[1].value + _ctx.quux))
return n2 return n2
})) }))
return n0 return n0

10
packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
View File

@ -93,8 +93,8 @@ describe('compiler: v-for', () => {
) )
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(code).contains(`_createFor(() => (_ctx.list), (_ctx0) => {`) expect(code).contains(`_createFor(() => (_ctx.list), (_ctx0) => {`)
expect(code).contains(`_createFor(() => (_ctx0[0]), (_ctx1) => {`) expect(code).contains(`_createFor(() => (_ctx0[0].value), (_ctx1) => {`)
expect(code).contains(`_ctx1[0]+_ctx0[0]`) expect(code).contains(`_ctx1[0].value+_ctx0[0].value`)
expect(ir.template).toEqual(['<span></span>', '<div></div>']) expect(ir.template).toEqual(['<span></span>', '<div></div>'])
expect(ir.block.operation).toMatchObject([ expect(ir.block.operation).toMatchObject([
{ {
@ -130,7 +130,7 @@ describe('compiler: v-for', () => {
) )
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(code).contains(`([{ id, ...other }, index]) => [id, other, index]`) expect(code).contains(`([{ id, ...other }, index]) => [id, other, index]`)
expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`) expect(code).contains(`_ctx0[0].value + _ctx0[1].value + _ctx0[2].value`)
expect(ir.block.operation[0]).toMatchObject({ expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.FOR, type: IRNodeTypes.FOR,
source: { source: {
@ -163,7 +163,7 @@ describe('compiler: v-for', () => {
) )
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(code).contains(`([[id, ...other], index]) => [id, other, index]`) expect(code).contains(`([[id, ...other], index]) => [id, other, index]`)
expect(code).contains(`_ctx0[0] + _ctx0[1] + _ctx0[2]`) expect(code).contains(`_ctx0[0].value + _ctx0[1].value + _ctx0[2]`)
expect(ir.block.operation[0]).toMatchObject({ expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.FOR, type: IRNodeTypes.FOR,
source: { source: {
@ -199,7 +199,7 @@ describe('compiler: v-for', () => {
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(code).contains(`([{ foo = bar, baz: [qux = quux] }]) => [foo, qux]`) expect(code).contains(`([{ foo = bar, baz: [qux = quux] }]) => [foo, qux]`)
expect(code).contains( expect(code).contains(
`_ctx0[0] + _ctx.bar + _ctx.baz + _ctx0[1] + _ctx.quux`, `_ctx0[0].value + _ctx.bar + _ctx.baz + _ctx0[1].value + _ctx.quux`,
) )
expect(ir.block.operation[0]).toMatchObject({ expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.FOR, type: IRNodeTypes.FOR,

6
packages/compiler-vapor/src/generators/for.ts
View File

@ -47,10 +47,10 @@ export function genFor(
if (context.options.prefixIdentifiers) { if (context.options.prefixIdentifiers) {
propsName = `_ctx${depth}` propsName = `_ctx${depth}`
Array.from(idsOfValue).forEach( Array.from(idsOfValue).forEach(
(id, idIndex) => (idMap[id] = `${propsName}[${idIndex}]`), (id, idIndex) => (idMap[id] = `${propsName}[${idIndex}].value`),
) )
if (rawKey) idMap[rawKey] = `${propsName}[${idsOfValue.size}]` if (rawKey) idMap[rawKey] = `${propsName}[${idsOfValue.size}].value`
if (rawIndex) idMap[rawIndex] = `${propsName}[${idsOfValue.size + 1}]` if (rawIndex) idMap[rawIndex] = `${propsName}[${idsOfValue.size + 1}].value`
} else { } else {
propsName = `[${[rawValue || ((rawKey || rawIndex) && '_'), rawKey || (rawIndex && '__'), rawIndex].filter(Boolean).join(', ')}]` propsName = `[${[rawValue || ((rawKey || rawIndex) && '_'), rawKey || (rawIndex && '__'), rawIndex].filter(Boolean).join(', ')}]`
} }

43
packages/runtime-vapor/__tests__/for.spec.ts
View File

@ -28,7 +28,7 @@ describe('createFor', () => {
state => { state => {
const span = document.createElement('li') const span = document.createElement('li')
renderEffect(() => { renderEffect(() => {
const [item, key, index] = state const [{ value: item }, { value: key }, { value: index }] = state
span.innerHTML = `${key}. ${item.name}` span.innerHTML = `${key}. ${item.name}`
// index should be undefined if source is not an object // index should be undefined if source is not an object
@ -94,11 +94,11 @@ describe('createFor', () => {
state => { state => {
const span = document.createElement('li') const span = document.createElement('li')
renderEffect(() => { renderEffect(() => {
const [item, key, index] = state const [{ value: item }, { value: key }, index] = state
span.innerHTML = `${key}. ${item}` span.innerHTML = `${key}. ${item}`
// index should be undefined if source is not an object // index should be undefined if source is not an object
expect(index).toBe(undefined) expect(index.value).toBe(undefined)
}) })
return span return span
}, },
@ -139,7 +139,7 @@ describe('createFor', () => {
state => { state => {
const span = document.createElement('li') const span = document.createElement('li')
renderEffect(() => { renderEffect(() => {
const [item, key, index] = state const [{ value: item }, { value: key }, { value: index }] = state
span.innerHTML = `${key}${index}. ${item}` span.innerHTML = `${key}${index}. ${item}`
expect(index).not.toBe(undefined) expect(index).not.toBe(undefined)
}) })
@ -319,23 +319,22 @@ describe('createFor', () => {
const { host } = define(() => { const { host } = define(() => {
const n1 = createFor( const n1 = createFor(
() => list.value, () => list.value,
withDestructure( state => {
state => { const span = document.createElement('li')
const [{ name }, key, index] = state renderEffect(() => {
return [name, key, index] const [
}, {
state => { value: { name },
const span = document.createElement('li') },
renderEffect(() => { { value: key },
const [name, key, index] = state index,
span.innerHTML = `${key}. ${name}` ] = state
span.innerHTML = `${key}. ${name}`
// index should be undefined if source is not an object // index should be undefined if source is not an object
expect(index).toBe(undefined) expect(index.value).toBe(undefined)
}) })
return span return span
}, },
),
item => item.name, item => item.name,
) )
return n1 return n1
@ -398,7 +397,7 @@ describe('createFor', () => {
state => { state => {
const span = document.createElement('li') const span = document.createElement('li')
renderEffect(() => { renderEffect(() => {
const [item, key, index] = state const [{ value: item }, { value: key }, { value: index }] = state
span.innerHTML = `${key}. ${item.name}` span.innerHTML = `${key}. ${item.name}`
// index should be undefined if source is not an object // index should be undefined if source is not an object

5
packages/runtime-vapor/src/apiCreateFor.ts
View File

@ -3,7 +3,6 @@ import {
type ShallowRef, type ShallowRef,
effectScope, effectScope,
isReactive, isReactive,
proxyRefs,
shallowRef, shallowRef,
triggerRef, triggerRef,
} from '@vue/reactivity' } from '@vue/reactivity'
@ -37,7 +36,7 @@ type Source = any[] | Record<any, any> | number | Set<any> | Map<any, any>
/*! #__NO_SIDE_EFFECTS__ */ /*! #__NO_SIDE_EFFECTS__ */
export const createFor = ( export const createFor = (
src: () => Source, src: () => Source,
renderItem: (block: any) => Block, renderItem: (block: ForBlock['state']) => Block,
getKey?: (item: any, key: any, index?: number) => any, getKey?: (item: any, key: any, index?: number) => any,
getMemo?: (item: any, key: any, index?: number) => any[], getMemo?: (item: any, key: any, index?: number) => any[],
hydrationNode?: Node, hydrationNode?: Node,
@ -265,7 +264,7 @@ export const createFor = (
memo: getMemo && getMemo(item, key, index), memo: getMemo && getMemo(item, key, index),
[fragmentKey]: true, [fragmentKey]: true,
}) })
block.nodes = scope.run(() => renderItem(proxyRefs(state)))! block.nodes = scope.run(() => renderItem(state))!
// TODO v-memo // TODO v-memo
// if (getMemo) block.update() // if (getMemo) block.update()