Version

3.2.25

Reproduction link

sfc.vuejs.org/

Steps to reproduce

click "next" button, view console log 点击 “下一步” 按钮，查看控制台输出日志

What is expected?

console log: init one one destroy one one init two two

What is actually happening?

console log: init one one destroy two one init two two

That's expected. you first change currentValue, then the component re-renders, and then the destroy callback gets called.

If you need help in solving this differently: chat.vuejs.org

Oh, I see, thank you.

function handleInit(outVal: string) {
  return function (inVal: string) {
    console.log('init', outVal, inVal)
  }
}
function handleDestroy(outVal: string) {
  return function (inVal: string) {
    console.log('destroy', outVal, inVal)
  }
}

<AttrItem
  v-if="currItem"
  :key="currItem.key"
  :val="currItem.name"
  :init="handleInit(currItem.name)"
  :destroy="handleDestroy(currItem.name)"
/>

I got the desired result by use the closure function.