Vue에서 계산된 속성/게터 디버링

Vue에서 계산된 속성/게터 디버링

나는 계산된 속성이나 vuex getter를 버릴 수 없을 것 같다.디버깅된 함수는 항상 정의되지 않은 상태로 돌아온다.

https://jsfiddle.net/guanzo/yqk0jp1j/2/

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

})

내가 논평에서 언급했듯이, 디폴딩은 본질적으로 비동기적인 작업이기 때문에 값을 반환할 수 없다.니즈에 따라, 당신은 입력 쪽에서 거절하는 것이 좋을지도 모른다.의 값 사이에는 차이가 없을 것이다.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>

나는 왜 디바운스 기능이 계산된 속성에서 작동하지 않는지에 대한 통찰력을 가지고 있지 않다.그러나, 대안적인 해결책은 미래에 어떤 기능에 대한 디바운드를 넣는 것이다.methods분할하여 a로 호출하다.watch.

https://jsfiddle.net/vsc4npv3/

HTML:

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

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)
  }

})

1. 심플
2. 외부 종속성 없음(예:_.debounce)
3. Vue에 맞게 맞춤

import Vue from 'vue'

// Thanks to https://github.com/vuejs-tips/v-debounce/blob/master/debounce.js
function debounce(fn, delay) {
  var timeoutID = null
  return function () {
    clearTimeout(timeoutID)
    var args = arguments
    var that = this
    timeoutID = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

function debouncedProperty(delay) {
  let observable = Vue.observable({ value: undefined });
  return {
    get() { return observable.value; },
    set: debounce(function (newValue) { observable.value = newValue; }, delay)
  }
}

// component
export default {
  computed: {
    myProperty: debouncedProperty(300),
  },
}

참조URL: https://stackoverflow.com/questions/44772629/debounce-computed-properties-getters-in-vue