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

Question

• 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>

我在赋值 list 的时候 只会触发一次 watch?

是 debounce 引起的,但是为什么会导致这个现象?每个文件 不应该是独立的实例吗?

有什么解决方案?

Answer 1

Vue同一个视图内引入的多个服用的子组件内的 debounce 的状态是共享的。之前我写过一篇小笔记就是这个 👉 聊一个复用组件中使用debounce时遇到的问题 。

具体可以在Vue文档里面看到 👉 #有状态方法 响应式基础 | Vue.js

这种方法对于被重用的组件来说是有问题的，因为这个预置防抖的函数是 有状态的：它在运行时维护着一个内部状态。如果多个组件实例都共享这同一个预置防抖的函数，那么它们之间将会互相影响。

Answer 2

用 this.$watch 解决了~