Vuejs 라이프 사이클 연결

이 강좌에서는 Vue를 학습하고 이해합니다.js 생명주기 연결.또한 구성 요소가 배후에서 어떻게 만들어지고 제거되는지 깊이 있게 이해할 것입니다.
라이프 사이클 연결은 거의 모든 프런트엔드 프레임워크의 입구점으로 구성 요소의 생성, 설치, 업데이트와 폐기 시간을 이해하는 것이 라이브러리의 반응성을 이해하는 데 매우 중요하다.
Vue의 라이프 사이클 연결에 대해 알아봅니다.js는 상당히 간단하다.다음 그림은 Vue의 전체 라이프 사이클에 대한 그림입니다.js 구성 요소.

생명주기 연결이 vue templates 번역의 서로 다른 단계에서 어떻게 변화하는지 관찰하다.
Vue에 따라js 문서의 각 Vue 인스턴스는 작성 시 일련의 초기화 단계를 거칩니다.예를 들어, 데이터 관찰을 설정하고 템플릿을 컴파일하여 인스턴스를 DOM에 로드하고 데이터가 변경될 때 DOM을 업데이트해야 합니다.또한 생명주기 연결이라고 불리는 함수를 실행하여 사용자가 특정 단계에 자신의 코드를 추가할 수 있도록 한다.

Vue가 생성한 연결

연결을 만들기 전에

beforeCreated 갈고리는 초기화 단계의 첫 번째 갈고리로 실례를 만들기 전에 촉발되기 때문에 이 상태에서 반응성을 설정하지 않습니다.이것은 우리가 데이터에 접근하거나 업데이트할 수 없다는 것을 의미한다.백엔드 API에서 데이터가 나오면 beforeCreated 갈고리에서 호출하면 정의되지 않은 것을 되돌려줍니다.예제 참조.

<script>
  export default {
    beforeCreated(){
      console.log(data);
      //This will return undefined 
    }
  }
</script>

연결이 생성됨

생성된 갈고리는 구성 요소가 생성될 때 터치합니다. 여기서 우리는 구성 요소의 데이터에 접근하고 반응성을 생성할 수 있습니다.그러나 템플릿과 가상 DOM은 이 갈고리에 설치되지 않았습니다.다음 예제 참조:

<script>
  export default {
    data(){
      return{
        message: "I am learning Vue lifecycle hooks"
      }
    },

    computed:{
      messageChange(){
        console.log(`This will look up to ${this.message} for changes`);
        return this.messages 
      }
    },

    created(){
      this.message = "now the message is changed";
      console.log(`messageChange will be updated since reactivity is present`);
    }
  }
</script>

Vue 설치 연결

연결 설치 전

beforeMount 갈고리는 가상 DOM의 초기 구현과 템플릿 또는 구현 함수의 컴파일 전에 터치합니다.서버 쪽에서 렌더링하는 동안 이 연결을 사용하는 것을 권장하지 않습니다. 렌더링한 후에는 호출할 수 없습니다.예 참조:

<script>
  export default {
    beforeMount(){
      console.log(`${this.el} is about to be mount`);
    }
</script>

장착된 연결

DOM 설정, 템플릿 및 구현 (이 $el)
보도에 따르면 마운트된 갈고리는 가장 자주 사용하는 생명주기 갈고리라고 한다.대부분의 사람들은 그것을 사용하여 구성 요소의 데이터를 얻는다. (나는 만든 갈고리를 사용하는 것을 권장한다.)예 참조:

<template>
  <p>Text inside a component</p>
</template>

<script>
  export default {
    mounted(){
      console.log(this.$el.textContent);
      //This will return the text from the template 
    }
</script>

Vue 업데이트 연결

구성 요소가 사용하는 반응성 속성이 변경되거나 사용자 입력을 통해 다시 렌더링되면 업데이트 연결이 터치됩니다.연결을 업데이트하면 구성 요소의watchcompute 렌더링 주기에 연결할 수 있습니다.
구성 요소가 다시 렌더링되는 시기를 알고 싶으면 사용할 수 있습니다.무효 구성 요소의 상태를 찾으려면 계산 속성이나 관찰자로 바꾸십시오.

연결 업데이트 전

beforeUpdate 갈고리는 구성 요소를 다시 보이기 전에 터치합니다. 구성 요소의 데이터 변경 시 시작합니다.이것은 반응 구성 요소를 렌더링하기 전에 그 상태를 추적하기에 좋은 곳이다.예 참조:

<script>
  export default {
    data(){
      n: 1,
    },

    beforeUpdate(){
      console.log(this.n) //sets the value of n to 300 after 1,500 seconds;
    },

    created(){
      setTimeOut(() => {
        this.n = 300
      }, 1500);
    }
</script>

업데이트된 연결

데이터 변경으로 인해 가상 DOM이 다시 나타나고 수정되면 업데이트된 갈고리가 호출됩니다.이 갈고리를 호출하면 구성 요소의 DOM이 업데이트되기 때문에 DOM에 의존하는 작업을 수행할 수 있습니다.그러나 대부분의 경우, 연결 안의 상태를 바꾸는 것을 피해야 합니다.상태 변화에 반응하기 위해서는 일반적으로 계산 속성이나 관찰 프로그램을 사용하는 것이 가장 좋다.

<template>
  <p ref="dom-element">{{name}}</p>
</template>

<script>
export default {
  data() {
    return {
      name: "Emmanuel Etukudo"
    }
  },

  updated() {
    // Track update on the DOM element.
    console.log(this.$refs['dom-element'].textContent === this.name)
  },

  created() {
    setTimeout(() => {
      this.name = "John Doe"
    }, 1000)
  }
}
</script>

연결 제거

연결 제거는 구성 요소가 제거될 때 실행됩니다. 예를 들어 구성 요소 기반 이벤트를 삭제하는 것입니다.DOM에서 어셈블리를 삭제하면 해당 어셈블리가 삭제됩니다.
연결을 제거하기 전에
Vue 인스턴스를 제거하기 전에 beforeDestroy 연결이 트리거됩니다.이 단계에서 실례는 여전히 완전히 정상적으로 일할 수 있다.

<script>
export default {
  data() {
    return {
      accessToken: localStorage.getItem('accessToken'),
    }
  },


  beforeDestroy() {
    // Remove the token.
    localStorage.removeItem('accessToken');
  },  
}
</script>

갈고리 파손

Vue 인스턴스를 제거하면 destroyedHook이 트리거됩니다.이 갈고리를 호출하면 Vue 인스턴스의 모든 명령이 바인딩 해제되고 모든 이벤트 탐지기가 삭제되며 모든 하위 Vue 인스턴스도 제거됩니다.

<script>
export default {
  destroyed() {
    console.log(this) // Nothing is left to log
  }
}
</script>

이 글에는 다른 두 개의 갈고리가 포착되지 않았다. 활성화와 정지 유지 활동 갈고리.Vue 문서 웹 사이트에서 찾을 수 있습니다.읽어주셔서 감사합니다. 당신의 평론을 내려놓으세요. 저는 당신을 즐겨 읽을 것입니다.