Skip to content

Commit ec4a4c1

Browse files
yyx990803yyx990803
committed
refactor(runtime-core): refactor props resolution
Improve performance in optimized mode + tests
1 parent c28a919 commit ec4a4c1

14 files changed

+439
-195
lines changed

‎packages/runtime-core/__tests__/apiSetupContext.spec.ts

-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ describe('api: setup context', () => {
120120
// puts everything received in attrs
121121
// disable implicit fallthrough
122122
inheritAttrs: false,
123-
props: {},
124123
setup(props: any, { attrs }: any) {
125124
return () => h('div', attrs)
126125
}

‎packages/runtime-core/__tests__/componentProps.spec.ts

+232
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
import {
2+
ComponentInternalInstance,
3+
getCurrentInstance,
4+
render,
5+
h,
6+
nodeOps,
7+
FunctionalComponent,
8+
defineComponent,
9+
ref
10+
} from '@vue/runtime-test'
11+
import { render as domRender, nextTick } from 'vue'
12+
import { mockWarn } from '@vue/shared'
13+
14+
describe('component props', () => {
15+
mockWarn()
16+
17+
test('stateful', () => {
18+
let props: any
19+
let attrs: any
20+
let proxy: any
21+
22+
const Comp = defineComponent({
23+
props: ['foo'],
24+
render() {
25+
props = this.$props
26+
attrs = this.$attrs
27+
proxy = this
28+
}
29+
})
30+
31+
const root = nodeOps.createElement('div')
32+
render(h(Comp, { foo: 1, bar: 2 }), root)
33+
expect(proxy.foo).toBe(1)
34+
expect(props).toEqual({ foo: 1 })
35+
expect(attrs).toEqual({ bar: 2 })
36+
37+
render(h(Comp, { foo: 2, bar: 3, baz: 4 }), root)
38+
expect(proxy.foo).toBe(2)
39+
expect(props).toEqual({ foo: 2 })
40+
expect(attrs).toEqual({ bar: 3, baz: 4 })
41+
42+
render(h(Comp, { qux: 5 }), root)
43+
expect(proxy.foo).toBeUndefined()
44+
expect(props).toEqual({})
45+
expect(attrs).toEqual({ qux: 5 })
46+
})
47+
48+
test('stateful with setup', () => {
49+
let props: any
50+
let attrs: any
51+
52+
const Comp = defineComponent({
53+
props: ['foo'],
54+
setup(_props, { attrs: _attrs }) {
55+
return () => {
56+
props = _props
57+
attrs = _attrs
58+
}
59+
}
60+
})
61+
62+
const root = nodeOps.createElement('div')
63+
render(h(Comp, { foo: 1, bar: 2 }), root)
64+
expect(props).toEqual({ foo: 1 })
65+
expect(attrs).toEqual({ bar: 2 })
66+
67+
render(h(Comp, { foo: 2, bar: 3, baz: 4 }), root)
68+
expect(props).toEqual({ foo: 2 })
69+
expect(attrs).toEqual({ bar: 3, baz: 4 })
70+
71+
render(h(Comp, { qux: 5 }), root)
72+
expect(props).toEqual({})
73+
expect(attrs).toEqual({ qux: 5 })
74+
})
75+
76+
test('functional with declaration', () => {
77+
let props: any
78+
let attrs: any
79+
80+
const Comp: FunctionalComponent = (_props, { attrs: _attrs }) => {
81+
props = _props
82+
attrs = _attrs
83+
}
84+
Comp.props = ['foo']
85+
86+
const root = nodeOps.createElement('div')
87+
render(h(Comp, { foo: 1, bar: 2 }), root)
88+
expect(props).toEqual({ foo: 1 })
89+
expect(attrs).toEqual({ bar: 2 })
90+
91+
render(h(Comp, { foo: 2, bar: 3, baz: 4 }), root)
92+
expect(props).toEqual({ foo: 2 })
93+
expect(attrs).toEqual({ bar: 3, baz: 4 })
94+
95+
render(h(Comp, { qux: 5 }), root)
96+
expect(props).toEqual({})
97+
expect(attrs).toEqual({ qux: 5 })
98+
})
99+
100+
test('functional without declaration', () => {
101+
let props: any
102+
let attrs: any
103+
const Comp: FunctionalComponent = (_props, { attrs: _attrs }) => {
104+
props = _props
105+
attrs = _attrs
106+
}
107+
const root = nodeOps.createElement('div')
108+
109+
render(h(Comp, { foo: 1 }), root)
110+
expect(props).toEqual({ foo: 1 })
111+
expect(attrs).toEqual({ foo: 1 })
112+
expect(props).toBe(attrs)
113+
114+
render(h(Comp, { bar: 2 }), root)
115+
expect(props).toEqual({ bar: 2 })
116+
expect(attrs).toEqual({ bar: 2 })
117+
expect(props).toBe(attrs)
118+
})
119+
120+
test('boolean casting', () => {
121+
let proxy: any
122+
const Comp = {
123+
props: {
124+
foo: Boolean,
125+
bar: Boolean,
126+
baz: Boolean,
127+
qux: Boolean
128+
},
129+
render() {
130+
proxy = this
131+
}
132+
}
133+
render(
134+
h(Comp, {
135+
// absent should cast to false
136+
bar: '', // empty string should cast to true
137+
baz: 'baz', // same string should cast to true
138+
qux: 'ok' // other values should be left in-tact (but raise warning)
139+
}),
140+
nodeOps.createElement('div')
141+
)
142+
143+
expect(proxy.foo).toBe(false)
144+
expect(proxy.bar).toBe(true)
145+
expect(proxy.baz).toBe(true)
146+
expect(proxy.qux).toBe('ok')
147+
expect('type check failed for prop "qux"').toHaveBeenWarned()
148+
})
149+
150+
test('default value', () => {
151+
let proxy: any
152+
const Comp = {
153+
props: {
154+
foo: {
155+
default: 1
156+
},
157+
bar: {
158+
default: () => ({ a: 1 })
159+
}
160+
},
161+
render() {
162+
proxy = this
163+
}
164+
}
165+
166+
const root = nodeOps.createElement('div')
167+
render(h(Comp, { foo: 2 }), root)
168+
expect(proxy.foo).toBe(2)
169+
expect(proxy.bar).toEqual({ a: 1 })
170+
171+
render(h(Comp, { foo: undefined, bar: { b: 2 } }), root)
172+
expect(proxy.foo).toBe(1)
173+
expect(proxy.bar).toEqual({ b: 2 })
174+
})
175+
176+
test('optimized props updates', async () => {
177+
const Child = defineComponent({
178+
props: ['foo'],
179+
template: `<div>{{ foo }}</div>`
180+
})
181+
182+
const foo = ref(1)
183+
const id = ref('a')
184+
185+
const Comp = defineComponent({
186+
setup() {
187+
return {
188+
foo,
189+
id
190+
}
191+
},
192+
components: { Child },
193+
template: `<Child :foo="foo" :id="id"/>`
194+
})
195+
196+
// Note this one is using the main Vue render so it can compile template
197+
// on the fly
198+
const root = document.createElement('div')
199+
domRender(h(Comp), root)
200+
expect(root.innerHTML).toBe('<div id="a">1</div>')
201+
202+
foo.value++
203+
await nextTick()
204+
expect(root.innerHTML).toBe('<div id="a">2</div>')
205+
206+
id.value = 'b'
207+
await nextTick()
208+
expect(root.innerHTML).toBe('<div id="b">2</div>')
209+
})
210+
211+
test('warn props mutation', () => {
212+
let instance: ComponentInternalInstance
213+
let setupProps: any
214+
const Comp = {
215+
props: ['foo'],
216+
setup(props: any) {
217+
instance = getCurrentInstance()!
218+
setupProps = props
219+
return () => null
220+
}
221+
}
222+
render(h(Comp, { foo: 1 }), nodeOps.createElement('div'))
223+
expect(setupProps.foo).toBe(1)
224+
expect(instance!.props.foo).toBe(1)
225+
setupProps.foo = 2
226+
expect(`Set operation on key "foo" failed`).toHaveBeenWarned()
227+
expect(() => {
228+
;(instance!.proxy as any).foo = 2
229+
}).toThrow(TypeError)
230+
expect(`Attempting to mutate prop "foo"`).toHaveBeenWarned()
231+
})
232+
})

‎packages/runtime-core/__tests__/componentProxy.spec.ts

+1-26
Original file line numberDiff line numberDiff line change
@@ -57,31 +57,6 @@ describe('component: proxy', () => {
5757
expect(instance!.renderContext.foo).toBe(2)
5858
})
5959

60-
test('propsProxy', () => {
61-
let instance: ComponentInternalInstance
62-
let instanceProxy: any
63-
const Comp = {
64-
props: {
65-
foo: {
66-
type: Number,
67-
default: 1
68-
}
69-
},
70-
setup() {
71-
return () => null
72-
},
73-
mounted() {
74-
instance = getCurrentInstance()!
75-
instanceProxy = this
76-
}
77-
}
78-
render(h(Comp), nodeOps.createElement('div'))
79-
expect(instanceProxy.foo).toBe(1)
80-
expect(instance!.propsProxy!.foo).toBe(1)
81-
expect(() => (instanceProxy.foo = 2)).toThrow(TypeError)
82-
expect(`Attempting to mutate prop "foo"`).toHaveBeenWarned()
83-
})
84-
8560
test('should not expose non-declared props', () => {
8661
let instanceProxy: any
8762
const Comp = {
@@ -110,7 +85,7 @@ describe('component: proxy', () => {
11085
}
11186
render(h(Comp), nodeOps.createElement('div'))
11287
expect(instanceProxy.$data).toBe(instance!.data)
113-
expect(instanceProxy.$props).toBe(instance!.propsProxy)
88+
expect(instanceProxy.$props).toBe(instance!.props)
11489
expect(instanceProxy.$attrs).toBe(instance!.attrs)
11590
expect(instanceProxy.$slots).toBe(instance!.slots)
11691
expect(instanceProxy.$refs).toBe(instance!.refs)

‎packages/runtime-core/src/apiAsyncComponent.ts

+3-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
ComponentInternalInstance,
66
isInSSRComponentSetup
77
} from './component'
8-
import { isFunction, isObject, EMPTY_OBJ, NO } from '@vue/shared'
8+
import { isFunction, isObject, NO } from '@vue/shared'
99
import { ComponentPublicInstance } from './componentProxy'
1010
import { createVNode } from './vnode'
1111
import { defineComponent } from './apiDefineComponent'
@@ -181,11 +181,7 @@ export function defineAsyncComponent<
181181

182182
function createInnerComp(
183183
comp: Component,
184-
{ props, slots }: ComponentInternalInstance
184+
{ vnode: { props, children } }: ComponentInternalInstance
185185
) {
186-
return createVNode(
187-
comp,
188-
props === EMPTY_OBJ ? null : props,
189-
slots === EMPTY_OBJ ? null : slots
190-
)
186+
return createVNode(comp, props, children)
191187
}

‎packages/runtime-core/src/component.ts

+9-20
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { VNode, VNodeChild, isVNode } from './vnode'
22
import {
33
reactive,
44
ReactiveEffect,
5-
shallowReadonly,
65
pauseTracking,
76
resetTracking
87
} from '@vue/reactivity'
@@ -15,7 +14,7 @@ import {
1514
exposePropsOnDevProxyTarget,
1615
exposeRenderContextOnDevProxyTarget
1716
} from './componentProxy'
18-
import { ComponentPropsOptions, resolveProps } from './componentProps'
17+
import { ComponentPropsOptions, initProps } from './componentProps'
1918
import { Slots, resolveSlots } from './componentSlots'
2019
import { warn } from './warning'
2120
import { ErrorCodes, callWithErrorHandling } from './errorHandling'
@@ -147,7 +146,6 @@ export interface ComponentInternalInstance {
147146
// alternative proxy used only for runtime-compiled render functions using
148147
// `with` block
149148
withProxy: ComponentPublicInstance | null
150-
propsProxy: Data | null
151149
setupContext: SetupContext | null
152150
refs: Data
153151
emit: EmitFn
@@ -208,7 +206,6 @@ export function createComponentInstance(
208206
proxy: null,
209207
proxyTarget: null!, // to be immediately set
210208
withProxy: null,
211-
propsProxy: null,
212209
setupContext: null,
213210
effects: null,
214211
provides: parent ? parent.provides : Object.create(appContext.provides),
@@ -292,26 +289,24 @@ export let isInSSRComponentSetup = false
292289

293290
export function setupComponent(
294291
instance: ComponentInternalInstance,
295-
parentSuspense: SuspenseBoundary | null,
296292
isSSR = false
297293
) {
298294
isInSSRComponentSetup = isSSR
295+
299296
const { props, children, shapeFlag } = instance.vnode
300-
resolveProps(instance, props)
297+
const isStateful = shapeFlag & ShapeFlags.STATEFUL_COMPONENT
298+
initProps(instance, props, isStateful, isSSR)
301299
resolveSlots(instance, children)
302300

303-
// setup stateful logic
304-
let setupResult
305-
if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
306-
setupResult = setupStatefulComponent(instance, parentSuspense, isSSR)
307-
}
301+
const setupResult = isStateful
302+
? setupStatefulComponent(instance, isSSR)
303+
: undefined
308304
isInSSRComponentSetup = false
309305
return setupResult
310306
}
311307

312308
function setupStatefulComponent(
313309
instance: ComponentInternalInstance,
314-
parentSuspense: SuspenseBoundary | null,
315310
isSSR: boolean
316311
) {
317312
const Component = instance.type as ComponentOptions
@@ -340,13 +335,7 @@ function setupStatefulComponent(
340335
if (__DEV__) {
341336
exposePropsOnDevProxyTarget(instance)
342337
}
343-
// 2. create props proxy
344-
// the propsProxy is a reactive AND readonly proxy to the actual props.
345-
// it will be updated in resolveProps() on updates before render
346-
const propsProxy = (instance.propsProxy = isSSR
347-
? instance.props
348-
: shallowReadonly(instance.props))
349-
// 3. call setup()
338+
// 2. call setup()
350339
const { setup } = Component
351340
if (setup) {
352341
const setupContext = (instance.setupContext =
@@ -358,7 +347,7 @@ function setupStatefulComponent(
358347
setup,
359348
instance,
360349
ErrorCodes.SETUP_FUNCTION,
361-
[propsProxy, setupContext]
350+
[instance.props, setupContext]
362351
)
363352
resetTracking()
364353
currentInstance = null

0 commit comments

Comments
 (0)