首先，让我添加一个复制您描述的问题的示例.
console.clear()
function debounce(func, wait, immediate) {
var timeout;
return function() {
console.log("Called from component ", this._uid)
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
Vue.component("doesntwork",{
props:["value"],
template:`<div>Component #{{_uid}} Value: {{innerValue}}</div>`,
data(){
return {
innerValue: this.value
}
},
watch:{
value(newVal){
this.processData(newVal)
}
},
methods:{
processData: debounce(function(newVal){
this.innerValue = newVal
}, 1000)
},
})
new Vue({
el: "#app",
data:{
parentValue: null,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
Type some text. Wait one second. Only the *last* component is updated.<br>
<input type="text" v-model="parentValue">
<doesntwork :value="parentValue"></doesntwork>
<doesntwork :value="parentValue"></doesntwork>
<doesntwork :value="parentValue"></doesntwork>
</div>
本质上，这里要做的是在编译组件时创建go Bounced函数，组件的每个实例共享samego Bounced函数.this的上下文在每一个中都是不同的，但它是相同的函数.我在生成的go Bounced函数中添加了console.log，这样您就可以看到所有三个组件共享相同的函数.在这种情况下，函数正在执行其设计的任务；它在经过一段时间后执行once，这就是为什么只更新最后一个组件.
为了避免这种行为，每个组件都需要一个unique次的go 盎司函数.这里有两种方法可以做到这一点.
Method One
可以使用相当于占位符的内容初始化processData方法.
methods: {
processData(){}
}
然后，在创建的生命周期事件中，将processData方法更改为debounced方法.
created(){
this.processData = debounce(function(){
console.log(this.id)
}, 250)
}
这将 for each 组件提供一个独特的debounce 功能，并应解决只有last个组件正常工作的问题.
下面是根据上述示例修改的示例.
console.clear()
Vue.component("works",{
props:["value"],
template:`<div>Component #{{_uid}} Value: {{innerValue}}</div>`,
data(){
return {
innerValue: this.value,
}
},
watch:{
value(newVal){
this.processData(newVal)
}
},
methods:{
processData() {}
},
created(){
this.processData = _.debounce(function(newVal){
this.innerValue = newVal
}, 1000)
}
})
new Vue({
el: "#app",
data:{
parentValue: null,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
Type some text. Wait one second. <em>All</em> components are updated.<br>
<input type="text" v-model="parentValue">
<works :value="parentValue"></works>
<works :value="parentValue"></works>
<works :value="parentValue"></works>
</div>
Method Two
感谢@RoyJ的建议.您可以在data中定义processData方法.通常不这样做是因为通常不需要一个函数的多个副本，这就是组件定义的methods部分存在的原因，但在这样的情况下，您可以 for each 组件定义一个唯一的函数，您可以在数据函数中定义方法，因为数据函数是为组件的every实例调用的.
data(){
return {
innerValue: this.value,
processData: _.debounce(function(newVal){
this.innerValue = newVal
}, 1000)
}
},
下面是一个使用这种方法的例子.
console.clear()
Vue.component("works",{
props:["value"],
template:`<div>Component #{{_uid}} Value: {{innerValue}}</div>`,
data(){
return {
innerValue: this.value,
processData: _.debounce(function(newVal){
this.innerValue = newVal
}, 1000)
}
},
watch:{
value(newVal){
this.processData(newVal)
}
},
})
new Vue({
el: "#app",
data:{
parentValue: null,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
Type some text. Wait one second. <em>All</em> components are updated.<br>
<input type="text" v-model="parentValue">
<works :value="parentValue"></works>
<works :value="parentValue"></works>
<works :value="parentValue"></works>
</div>