fix(runtime-core): should remove no longer present camelCase props (#…

…1413)

fix #1412

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

@@ -21,7 +21,7 @@ describe('component props', () => {
  let proxy: any
 
  const Comp = defineComponent({
- props: ['fooBar'],
+ props: ['fooBar', 'barBaz'],
  render() {
  props = this.$props
  attrs = this.$attrs
@@ -42,13 +42,16 @@ describe('component props', () => {
  expect(attrs).toEqual({ bar: 3, baz: 4 })
 
  // test updating kebab-case should not delete it (#955)
- render(h(Comp, { 'foo-bar': 3, bar: 3, baz: 4 }), root)
+ render(h(Comp, { 'foo-bar': 3, bar: 3, baz: 4, barBaz: 5 }), root)
  expect(proxy.fooBar).toBe(3)
- expect(props).toEqual({ fooBar: 3 })
+ expect(proxy.barBaz).toBe(5)
+ expect(props).toEqual({ fooBar: 3,barBaz: 5 })
  expect(attrs).toEqual({ bar: 3, baz: 4 })
 
  render(h(Comp, { qux: 5 }), root)
  expect(proxy.fooBar).toBeUndefined()
+ // remove the props with camelCase key (#1412)
+ expect(proxy.barBaz).toBeUndefined()
  expect(props).toEqual({})
  expect(attrs).toEqual({ qux: 5 })
  })

packages/runtime-core/src/componentProps.ts

@@ -190,13 +190,19 @@ export function updateProps(
  for (const key in rawCurrentProps) {
  if (
  !rawProps ||
- (!hasOwn(rawProps, key) &&
+ (
+ // for camelCase
+ !hasOwn(rawProps, key) &&
  // it's possible the original props was passed in as kebab-case
  // and converted to camelCase (#955)
  ((kebabKey = hyphenate(key)) === key || !hasOwn(rawProps, kebabKey)))
  ) {
  if (options) {
- if (rawPrevProps && rawPrevProps[kebabKey!] !== undefined) {
+ if (rawPrevProps && (
+ // for camelCase
+ rawPrevProps[key] !== undefined ||
+ // for kebab-case
+ rawPrevProps[kebabKey!] !== undefined)) {
  props[key] = resolvePropValue(
  options,
  rawProps || EMPTY_OBJ,