vue 同个组件 watch debounce 后只会触发一次?

Z时代
2024-02-11
分类：IT

Parent.vue

<template>
<div>
  <div v-for="(item,index) in list" :key="index">
    child{{ index }}
    <Child :item="item" />
  </div>
</div>
</template>
<script>
import Child from './Child'
export default {
components: {
  Child
},
data() {
  return {
    list: []
  }
},
mounted() {
  this.list = Array.from({ length: 3 }, (_, index) => {
    return {
      name: 'alan',
      age: index
    }
  })
}
}</script>

Child.vue

<template>
<div />
</template>
<script>
import { debounce } from 'lodash'
export default {
props: {
  item: {
    type: Object,
    default: () => ({})
  }
},
watch: {
  item: {
    handler: debounce(function(val) {
      console.log('? ~ handler ~ val:', val)
    }),
    deep: true,
    immediate: true
  }
}
}</script>