갱신된 라이프 사이클이벤트: 특정 요소에 대해서만 dom 갱신 후 워처를 사용하여 동작

갱신된 라이프 사이클이벤트: 특정 요소에 대해서만 dom 갱신 후 워처를 사용하여 동작

Vue에 가면updated' 라이프 사이클 방식.데이터가 입력된 후에 마크업으로 작업을 수행하는 데 적합합니다.제 경우, SVG 텍스트를 수동으로 움직여 새로운 텍스트가 입력되어 치수가 변경된 후 뭔가에 맞추고 있습니다.

음, 난 '를 사용하고 싶은 것 같아.watch특정 속성을 변경한 후에만 정렬 기능을 실행할 수 있기 때문에 차단합니다만, 실제로 필요한 것은 '를 사용하는 것입니다.updated데이터가 아닌 DOM과 관련된 이벤트입니다만, 어떻게 편집과 원인이 된 하나의 요소만으로 정렬 기능을 분리하여 실행할 수 있을까요?updated'발사할 것인가?

사용자 데이터 입력에 의해 업데이트되지도 않은 오브젝트에 대해 여러 조정 기능을 발생시키지 않는 것이 좋습니다.

워치 속성은 데이터와 관련이 있으며 업데이트는 마크업과 관련이 있습니다.결과적으로, 정렬 기능은 입력 뒤에 있는 키입니다.마크업이 렌더링되기 전에 정렬이 실행됩니다.따라서 정렬할 때 이전 렌더링을 사용하여 이 작업을 수행합니다.따라서 마크업과 관련된 이벤트에 접속해야 합니다.

사용하다Vue.nextTick(() => { /* code you were executing */ }):

문서:

Vue.nextTick([콜백, 컨텍스트])

• 인수:

  • {Function} [callback]
  • {Object} [context]

• 사용방법:

  다음 DOM 업데이트사이클 후에 실행되는 콜백을 연기합니다.일부 데이터를 변경한 후 DOM 업데이트를 대기하기 위해 즉시 사용하십시오.

  // modify data
  vm.msg = 'Hello'
  // DOM not updated yet
   Vue.nextTick(function () {
   // DOM updated
  })
  
  // usage as a promise (2.1.0+, see note below)
  Vue.nextTick()
  .then(function () {
    // DOM updated
  })
  

그래서 다음 대신:

new Vue({
  el: '#app',
  // ...
  watch: {
    someProperty() {
      someUpdateCode();
    }
  }
})

작업:

new Vue({
  el: '#app',
  // ...
  watch: {
    someProperty() {
      Vue.nextTick(() => { someUpdateCode(); });
    }
  }
})

코멘트:새로운 javascript 구문은 전 세계에 적용됩니까?

네, 화살표 기능입니다.꽤 표준적인 JavaScript 구문입니다.ES6(ECMAScript 2017) 버전에서 제공됩니다.

기본적으로 코드Vue.nextTick(() => { someUpdateCode(); });다음과 같습니다.Vue.nextTick(function () { someUpdateCode(); }.bind(this));

대충 말하면(abc) => { code }와 같다function(abc) { code }.bind(this).그.bind(this)파트는 중요하고 간과되는 경우가 많습니다.화살표 기능은 원래 컨텍스트를 유지합니다.this,반면에.function(){}에는 고유의 것이 있습니다.this(이 함수는 호출하는 사람에 의해 수정됩니다.functionName.call()또는functionName.apply()),.bind()원래의 문맥을 유지하는 것이다.this내부function.

Vue의 갱신된 방법으로 실행합니다.특정 속성 변경에 따라 특정 기능을 실행하기 위해 특정 속성이 변경되었는지 여부를 알려주는 도움말 변수를 도입할 수 있습니다.

편집되어 '오류'가 발생하게 한 요소만으로 정렬 기능을 분리하여 실행하는 것이 어떻게 가능했을까요?

요소가 변경되었을 때 Boolean 속성을 True로 설정하고 'Updated' 메서드에서는 해당 Boolean 속성에 if 조건을 사용하여 true일 때 정렬 함수를 실행하고 해당 Boolean 속성을 false로 재설정하도록 Boolean 속성을 만들고 바인드합니다.

언급URL : https://stackoverflow.com/questions/49410249/updated-lifecycle-event-act-using-watcher-after-dom-update-on-specific-element