Vue 2 후크 준비 완료

Vue 2 후크 준비 완료

Vue 2, 실제로 "완료 렌더링"을 나타내는 라이프 사이클 훅이 있습니까?페이지 입력 시 로딩 화면을 넣고 싶은데 Vue가 모든 로딩을 마치면 페이지 내용이 희미해져 표시되지만, 라이프 사이클 훅은 대부분 시도했지만 작동하지 않습니다.여기 내가 만약 한다면 시도해 볼 것이 있다.updated는, 「인쇄 렌더링」을 나타냅니다.

updated(){
  this.loaded()
},
methods:{
  loaded(){
    var vm = this;
    this.loading = false;
  }
}

이러한 라이프 사이클 훅이 없는 경우, 어떻게 하면 좋을까요?고마워요.

아마 당신이 찾고 있는 방법은mounted()이는 vue 컴포넌트가 준비되면 실행됩니다.Vue 라이프 사이클 매뉴얼은 여기서 확인할 수 있습니다.

따라서 Vue 인스턴스는 다음과 같습니다.

var app = new Vue({
    el: '#app',
    /*
     * When the instance is loaded up
     */
    mounted: function () {
        this.loaded()
    },
    methods: {
        loaded: function () {
            var vm = this
            this.loading = false
        }
    }
})

모든 하위 구성 요소도 장착되었는지 확인하려면vm.$nextTick- set Timeout보다 훨씬 깨끗합니다.

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

출처 : https://vuejs.org/v2/api/ #Options - Life cycle-Hooks

모든 렌더링이 종료된 지점을 후크하기 위한 특정 라이프 사이클 훅이나 Vue 지정 방법이 없기 때문에 기본 js 코드와 모든 것을 로딩하는 데 필요한 시간 견적을 다음과 같이 사용했습니다.

mounted(){
  this.loaded()
},
methods:{
  loaded(){
    var vm = this;
    setTimeout(function(){
      vm.loading = false
    }, 3000);
  }
}

Vue에 강점을 가지고 더 정확하게 후크할 수 있는 새로운 답변을 제공하는 사람이 있기를 바랍니다.

사실, 당신의 질문에 대한 답변은 당신이 원래 질문한 것과 다릅니다. Vue 인스턴스는 1초 이내에 렌더링되며 사용자 친화적인 로더를 만들기 위해서만 후크를 사용할 수 없습니다.사용 사례setTimeout기능만이 유일한 해결책입니다.하지만 컴포넌트는 3초보다 훨씬 빨리 DOM에 준비되었습니다.

이 목적을 위한 최선의 접근법은 로더 컴포넌트를 사용하는 것입니다.이 경우 로더 컴포넌트는setTimeout에created이 시간이 지나면 부모에게 이벤트를 보냅니다.따라서 앱 내에서 로더 구성 요소 자체만 가져오면 되고 이벤트가 발생할 때 내부 부울 데이터 속성을 변경하여 다른 구성 요소를 렌더링하면 됩니다. v-if

언급URL : https://stackoverflow.com/questions/41436523/vue-2-hook-ready