Vuejs 2: 워치옵션으로 동작하지 않음

Vuejs 2: 워치옵션으로 동작하지 않음

VueJs에서 이 함수를 발표할 때 밀리초 수를 프리미티브로 지정하면 정상적으로 작동합니다.단, 소품에 대한 참조로 제공하면 무시됩니다.

다음은 소품 약어입니다.

props : {
    debounce : {
        type : Number,
        default : 500
    }
}

동작하지 않는 워치옵션은 다음과 같습니다.

watch : {
    term : _.debounce(function () {
        console.log('Debounced term: ' + this.term);
    }, this.debounce)
}

동작하는 워치옵션은 다음과 같습니다.

watch : {
    term : _.debounce(function () {
        console.log('Debounced term: ' + this.term);
    }, 500)
}

범위 문제인 것 같은데 어떻게 고쳐야 할지 모르겠어요.시계 방법을 다음과 같이 대체하면...:

watch : {
    term : function () {
        console.log(this.debounce);
    }
}

... 콘솔에 올바른 디바운스 값(500)이 표시됩니다.

@Bert의 답변에 대한 또 다른 변형은 워처 기능을 구축하는 것입니다.created(),

// SO: Vuejs 2: debounce not working on a watch option

console.clear()

Vue.component("debounce",{
  props : {
    debounce : {
      type : Number,
      default : 500
    }
  },
  template:`
    <div>
      <input type="text" v-model="term">
    </div>
  `,
  data(){
    return {
      term: "",
      debounceFn: null
    }
  },
  created() {
    this.debounceFn = _.debounce( () => {
      console.log('Debounced term: ' + this.term);
    }, this.debounce)
  },
  watch : {
    term : function () {
      this.debounceFn();
    }
  },
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<div id="app">
  <debounce :debounce="2000"></debounce>
</div>

CodePen의 예

여기서 가장 중요한 문제는this.debounce디버깅된 함수를 정의할 때의 간격입니다.그 당시에_.debounce(...)실행(컴포넌트 컴파일 중) 함수는 아직 Vue에 연결되어 있지 않습니다.thisVue가 아니라this.debounce정의되지 않습니다.이 경우 컴포넌트인스턴스 작성 후 워치를 정의해야 합니다.Vue는 $watch를 사용하여 이를 수행할 수 있는 기능을 제공합니다.

작성한 라이프 사이클 핸들러에 추가하는 것을 추천합니다.

created(){
  this.unwatch = this.$watch('term', _.debounce((newVal) => {
     console.log('Debounced term: ' + this.term);
  }, this.debounce))
},
beforeDestroy(){
  this.unwatch()
}

상기의 코드에 의해, 콜도 행해지는 것에 주의해 주세요.unwatch부품이 파괴되기 전에 말이죠이 작업은 일반적으로 Vue에 의해 처리되지만, 코드가 수동으로 워치를 추가하기 때문에 워치 삭제도 코드에서 관리해야 합니다.물론 추가가 필요합니다.unwatch데이터 속성으로 사용합니다.

여기 작업 예가 있습니다.

console.clear()

Vue.component("debounce",{
  props : {
    debounce : {
      type : Number,
      default : 500
    }
  },
  template:`
    <input type="text" v-model="term">
  `,
  data(){
    return {
      unwatch: null,
      term: ""
    }
  },
  created(){
    this.unwatch = this.$watch('term', _.debounce((newVal) => {
      console.log('Debounced term: ' + this.term);
    }, this.debounce))
  },
  beforeDestroy(){
    this.unwatch()
  }
})

new Vue({
  el: "#app"
})

<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">
  <debounce :debounce="250"></debounce>
</div>

new Vue({
  el: '#term',
  data: function() {
    return {
      term: 'Term',
      debounce: 1000
    }
  },
  watch: {
    term : _.debounce(function () {
        console.log('Debounced term: ' + this.term);
    }, this.debounce)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<div id="term">
  <input v-model="term">
</div>

그debounced method매번 같은 함수를 호출해야 하므로 추상화할 필요가 있습니다.watch트리거 됩니다.를 배치하면debounced내부 방식Vue computed또는watch매번 갱신됩니다.

const debouncedGetData = _.debounce(getData, 1000);

function getData(val){
  this.newFoo = val;
}

new Vue({
  el: "#app",
  template: `
    <div>
      <input v-model="foo" placeholder="Type something..." />
      <pre>{{ newFoo }}</pre>
    </div>
`,
    data(){
      return {
        foo: '',
        newFoo: ''
      }
    },
    watch:{
      foo(val, prevVal){
        debouncedGetData.call(this, val);
      }
    }
  
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app"></div>

행운을 빈다...

언급URL : https://stackoverflow.com/questions/47172952/vuejs-2-debounce-not-working-on-a-watch-option