IT이야기

바인딩 및 언바인드가 Vue의 사용자 지정 명령을 호출한 경우 및 라이프사이클 기능과 어떻게 관련되는지(장착/파괴)

cyworld 2022. 4. 10. 22:13
반응형

바인딩 및 언바인드가 Vue의 사용자 지정 명령을 호출한 경우 및 라이프사이클 기능과 어떻게 관련되는지(장착/파괴)

예를 들어, 창 크기 조정 이벤트를 처리하는 사용자 지정 지시문을 만들고

Vue.directive('resize', {
  bind(el, binding, vnode) {
    el.resizeEvent = function() {
      vnode.context[binding.expression]()
    }

    // I would like it to be called in mounted
    Vue.nextTick(el.resizeEvent)

    window.addEventListener('resize', el.resizeEvent)
  },
  unbind(el) {
    window.removeEventListener('resize', el.resizeEvent)
  }
})

나는 덧붙였다.Vue.nextTick(el.resizeEvent)이 기능을 컴포넌트를 장착할 때 호출하고 싶기 때문이다.

이 지시는 지금까지 예상한 대로 작동한다.그러나 언제가 될지는 알 수 없다.bind그리고unbind부름을 받다

문서에서는 다음과 같이 주장하였다.

bind: called only once, when the directive is first bound to the element. This is where you can do one-time setup work.

unbind: called only once, when the directive is unbound from the element.

내 질문은, 정확히 언제가bind그리고unbind호출되며, 다음과 같은 라이프 사이클 훅과 어떻게 관련이 있는가?mounted,created또는destroyed?

참조URL: https://stackoverflow.com/questions/51649368/when-does-bind-and-unbind-called-in-custom-directives-of-vue-and-how-are-they-re

반응형