Vue 명령 의 갈고리 함수 사용 방법

Vue 에서 일련의 복잡 한 조작 을 하나의 명령 으로 포장 할 수 있다.
무엇이 복잡 한 조작 입 니까?
나의 이 해 는 복잡 한 논리 기능 의 포장,데이터 구동 에 어 긋 나 는 DOM 조작 과 일부 Hack 수단 에 대한 은폐 등 이다.우 리 는 항상 데 이 터 를 조작 하 는 형식 으로 기능 논 리 를 실현 하 기 를 기대한다.
갈고리 함수
사용자 정의 명령 에 대한 정 의 는 Vue 2 에 선택 할 수 있 는 갈고리 함수 가 5 개 있 습 니 다.
bid:한 번 만 호출 합 니 다.명령 이 처음으로 요소 에 연결 되 었 을 때 호출 합 니 다.이 갈고리 함수 로 바 인 딩 할 때 한 번 실행 하 는 초기 화 동작 을 정의 할 수 있 습 니 다.
inserted:부모 노드 에 연 결 된 요소 가 삽입 되 었 을 때 호출 합 니 다.(부모 노드 가 존재 하면 호출 할 수 있 습 니 다.document 에 저장 할 필요 가 없습니다.)
update:바 인 딩 요소 가 있 는 템 플 릿 이 업데이트 되 었 을 때 호출 됩 니 다.바 인 딩 값 이 변경 되 었 든 안 되 었 든 간 에.
componentUpdated:바 인 딩 요소 가 있 는 템 플 릿 이 업데이트 주 기 를 완성 할 때 호출 됩 니 다.
unbid:한 번 만 호출 하고 명령 과 요 소 를 풀 때 호출 합 니 다.
다음은 갈고리 함수 의 트리거 시 기 를 검증 하기 위해 간단 한 명령 을 정의 합 니 다.
template

<div id="app">
 <my-comp v-if="msg" :msg="msg"></my-comp>
 <button @click="update">  </button>
 <button @click="uninstall">  </button>
 <button @click="install">  </button>
</div>

script

Vue.directive('hello', {
 bind: function (el) {
  console.log('bind')
 },
 inserted: function (el) {
  console.log('inserted')
 },
 update: function (el) {
  console.log('update')
 },
 componentUpdated: function (el) {
  console.log('componentUpdated')
 },
 unbind: function (el) {
  console.log('unbind')
 }
})
var myComp = {
 template: '<h1 v-hello>{{msg}}</h1>',
 props: {
  msg: String
 }
}
new Vue({
 el: '#app',
 data: {
  msg: 'Hello'
 },
 components: {
  myComp: myComp
 },
 methods: {
  update: function () {
   this.msg = 'Hi'
  },
  uninstall: function () {
   this.msg = ''
  },
  install: function () {
   this.msg = 'Hello'
  }
 }
})

페이지 불 러 올 때
bind
inserted
구성 요소 업데이트 시
"업데이트"단 추 를 누 르 면 데이터 트리거 구성 요소 업 데 이 트 를 변경 합 니 다.
update
componentUpdated
구성 요소 마 운 트 해제 시
"마 운 트 해제"단 추 를 누 르 면 데 이 터 를 비 워 두 고 부정 적 판단 을 해서 구성 요 소 를 마 운 트 해제 합 니 다.
unbind
구성 요소 다시 설치 시
"설치"단 추 를 누 르 면 데이터 할당 은 구성 요 소 를 다시 설치 할 것 이 라 고 판단 합 니 다.
bind
inserted
구별
사례 의 운행 에서 5 개의 갈고리 함수 의 촉발 시기 에 대해 초보적인 인식 을 가지 게 되 었 다.의심 되 는 것 은 bid 와 inserted,update 와 componentUpdated 의 차이 점 입 니 다.
bind 와 inserted
문서 에 따 르 면 부모 노드 를 삽입 할 때 inserted 를 호출 하여 테스트 합 니 다.

bind: function (el) {
 console.log(el.parentNode) // null
 console.log('bind')
},
inserted: function (el) {
 console.log(el.parentNode) // <div id="app">...</div>
 console.log('inserted')
}

각각 두 개의 갈고리 함수 에서 부모 노드 를 출력 합 니 다.bid 시 부모 노드 는 null 이 고 inserted 시 부모 노드 가 존재 합 니 다.
update 와 componentUpdated
이 두 가지 에 대한 소 개 는 단어 적 으로 구성 요소 업데이트 주기 와 관련 이 있 는 것 같 아서 계속 검증 합 니 다.

update: function (el) {
 console.log(el.innerHTML) // Hello
 console.log('update')
},
componentUpdated: function (el) {
 console.log(el.innerHTML) // Hi
 console.log('componentUpdated')
}

문제 없습니다.update 와 componentUpdated 는 구성 요소 업데이트 전과 업데이트 후의 차이 입 니 다.
결론.
문서 말 이 맞습니다.
Demo
최선 의 실천
수요 에 따라 우 리 는 명령 을 초기 화하 고 명령 호출 파 라 메 터 를 업데이트 하 며 명령 이 존재 할 때의 메모리 점용 등 적절 한 시 기 를 선택해 야 한다.
비교적 흔히 볼 수 있 는 장면 은 명령 으로 의존 하지 않 는 제3자 라 이브 러 리 를 포장 하여 구성 요소 기능 을 확장 하 는 것 이다.건장 한 라 이브 러 리 는 인 스 턴 스 초기 화,파라미터 업데이트,인 스 턴 스 자원 사용 등 을 포함한다.

Vue.directive('hello', {
 bind: function (el, binding) {
  //   bind          
  //          ，     inserted      
  el.__library__ = new Library(el, binding.value)
 },
 update: function (el, binding) {
  //                  ，              
  //      update   componentUpdated   
  el.__library__.setOptions(Object.assign(binding.oldValue, binding.value))
 },
 unbind: function (el) {
  //     
  el.__library__.destory()
 }
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.