fix: changing prop causes rerender to lose attributes #840 (#843)

Co-authored-by: neiyichao03 <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>

Author: 3 people

src/mixin.ts

@@ -34,7 +34,7 @@ export function mixin(Vue: VueConstructor) {
       updateTemplateRef(this)
     },
     beforeUpdate() {
-      updateVmAttrs(this as ComponentInstance, this as SetupContext)
+      updateVmAttrs(this as ComponentInstance)
     },
     updated(this: ComponentInstance) {
       updateTemplateRef(this)

src/utils/instance.ts

@@ -103,18 +103,22 @@ export function updateTemplateRef(vm: ComponentInstance) {
   vmStateManager.set(vm, 'refs', validNewKeys)
 }
 
-export function updateVmAttrs(vm: ComponentInstance, ctx: SetupContext) {
-  if (!vm || !ctx) {
+export function updateVmAttrs(vm: ComponentInstance, ctx?: SetupContext) {
+  if (!vm) {
     return
   }
   let attrBindings = vmStateManager.get(vm, 'attrBindings')
+  if (!attrBindings && !ctx) {
+    // fix 840
+    return
+  }
   if (!attrBindings) {
     const observedData = reactive({})
-    vmStateManager.set(vm, 'attrBindings', observedData)
-    attrBindings = observedData
+    attrBindings = { ctx: ctx!, data: observedData }
+    vmStateManager.set(vm, 'attrBindings', attrBindings)
     proxy(ctx, 'attrs', {
       get: () => {
-        return attrBindings
+        return attrBindings?.data
       },
       set() {
         __DEV__ &&
@@ -128,8 +132,8 @@ export function updateVmAttrs(vm: ComponentInstance, ctx: SetupContext) {
 
   const source = vm.$attrs
   for (const attr of Object.keys(source)) {
-    if (!hasOwn(attrBindings!, attr)) {
-      proxy(attrBindings, attr, {
+    if (!hasOwn(attrBindings.data, attr)) {
+      proxy(attrBindings.data, attr, {
         get: () => {
           // to ensure it always return the latest value
           return vm.$attrs[attr]

src/utils/vmStateManager.ts

@@ -1,9 +1,13 @@
 import { ComponentInstance, Data } from '../component'
+import { SetupContext } from '../runtimeContext'
 
 export interface VfaState {
   refs?: string[]
   rawBindings?: Data
-  attrBindings?: Data
+  attrBindings?: {
+    ctx: SetupContext
+    data: Data
+  }
   slots?: string[]
 }
 

test/setup.spec.js

@@ -1304,4 +1304,81 @@ describe('setup', () => {
       lastName: 'xiao',
     })
   })
+
+  // #840
+  it('changing prop causes rerender to lose attributes', async () => {
+    let childAttrs = []
+    const Parent = {
+      computed: {
+        attrs() {
+          return {
+            'data-type': this.type,
+          }
+        },
+      },
+      props: {
+        type: {
+          type: String,
+          required: true,
+        },
+      },
+      mounted() {
+        childAttrs.push(this.attrs)
+      },
+      updated() {
+        childAttrs.push(this.attrs)
+      },
+      template: '<div v-bind="attrs">Parent<slot /></div>',
+    }
+    const Child = {
+      props: {
+        type: {
+          type: String,
+          required: true,
+        },
+      },
+      computed: {
+        attrs() {
+          return {
+            'data-type': this.type,
+          }
+        },
+      },
+      data() {
+        return {
+          update: 0,
+        }
+      },
+      template: '  <div v-bind="attrs">Child</div>',
+    }
+
+    const App = {
+      name: 'App',
+      data() {
+        return { parentType: 'parent' }
+      },
+      async mounted() {
+        await sleep(300)
+        this.parentType = 'parent-click'
+      },
+
+      components: {
+        Parent,
+        Child,
+      },
+      template: ` <div id="app">
+        <Parent :type="parentType">
+          <Child type="child"/>
+        </Parent>
+      </div>`,
+    }
+    const vm = new Vue(App).$mount()
+
+    await sleep(1000)
+    await vm.$nextTick()
+    expect(childAttrs).toStrictEqual([
+      { 'data-type': 'parent' },
+      { 'data-type': 'parent-click' },
+    ])
+  })
 })