反彈在Vue中計算的屬性/獲得者

我似乎無法反彈（lodash）計算屬性或vuex獲取者。去抖動函數總是返回undefined。反彈在Vue中計算的屬性/獲得者

HTML：

<div id="app"> 
    <input v-model="text"> 
    <div>computed: {{ textComputed }} </div> 
    <div>debounced: {{ textDebounced }} </div> 
</div>

JS：

new Vue({ 
    el:'#app', 
    data:{ 
    text:'' 
    }, 
    computed:{ 
    textDebounced: _.debounce(function(){ 
     return this.text 
    },500), 
    textComputed(){ 
     return this.text 
    } 
    } 

})

來源

2017-06-27 Eric Guan

你開到替代解決方案或者是你要求去抖適用於計算的項目嗎？ – mrogers

嗯，我想知道它爲什麼不起作用，但是肯定你有什麼樣的替代解決方案？ –

看到這個有趣的小提琴：https://jsfiddle.net/yqk0jp1j/3/ – Cobaltway

正如我在我的評論提到，去抖動本質上是一個異步操作，所以不能返回一個值。根據您的需要，您可能需要在輸入端一側反彈。 text與textComputed之間的值不會有差異，但如果您v-model="textComputed"，值設置將被消除。

如果您特別想要一個變量的去抖版本，mrogers已經給出了一個很好的解決方案。

var x = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    text: 'start' 
 
    }, 
 
    computed: { 
 
    textComputed: { 
 
     get() { 
 
     return this.text; 
 
     }, 
 
     set: _.debounce(function(newValue) { 
 
     this.text = newValue; 
 
     }, 500) 
 
    } 
 
    } 
 
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 
 
<div id="app"> 
 
    <div> 
 
    Debounced input: 
 
    <input v-model="textComputed"> 
 
    </div> 
 
    <div> 
 
    Immediate input: 
 
    <input v-model="text"> 
 
    </div> 
 
    <div>computed: {{ textComputed }} </div> 
 
    <div>debounced: {{ text }} </div> 
 
</div>

來源

2017-06-27 12:55:32

我主要想知道爲什麼它不起作用，謝謝。我並沒有剔除任何輸入，這只是我的例子，我只是想以某種方式推遲計算出的屬性值。 –

我沒有任何見解，爲什麼去抖動功能不會對計算性能的工作。但是，另一種解決方案是在methods部分中將函數的去抖動放入函數中，並通過watch進行調用。

https://jsfiddle.net/vsc4npv3/

HTML：

的JavaScript：

var x = new Vue({ 
    el:'#app', 
    data:{ 
    text:'', 
    debouncedText: '' 
    }, 
    watch: { 
    text: function (val) { 
     this.debouncer(); 
    } 
    }, 
    computed:{ 
    textComputed(){ 
     return this.text; 
    } 
    }, 
    methods: { 
    debouncer: _.debounce(function(){ 
     this.debouncedText = this.text; 
    },500) 
    } 

})

來源

2017-06-27 05:23:57 mrogers

反彈在Vue中計算的屬性/獲得者

回答

相關問題