Vue 2 móc sẵn sàng

Question

Vue 2, Có móc vòng đời thực sự đề cập đến "kết xuất xong" không? Tôi muốn đặt một màn hình tải khi vào một trang và nó biến mất và hiển thị nội dung trang một khi Vue đã hoàn tất tải tất cả mọi thứ, nhưng tôi đã cố gắng hầu hết các móc vòng đời nhưng không hoạt động. Dưới đây là một cái gì đó tôi sẽ cố gắng để làm gì nếu updated đề cập đến "xong render":

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

Nếu không có như vậy một cái móc vòng đời, những gì bạn sẽ đề nghị tôi làm để thay thế? Cảm ơn

Answer 1

Có lẽ phương pháp bạn đang tìm kiếm là mounted(), điều này được kích hoạt khi thành phần vue sẵn sàng. Bạn có thể kiểm tra tài liệu vòng đời Vue here

như vậy có lẽ Vue dụ của bạn sẽ trông như thế này:

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 
    } 
    } 
}) 

Answer 2

Như tôi đã không thể tìm thấy rằng có một cái móc vòng đời cụ thể hoặc phương pháp Vue chỉ định khác để treo điểm mà tất cả mọi thứ được kết thúc hiển thị, tôi đã sử dụng mã js cơ bản cũng như ước lượng thời gian cần thiết cho tải tất cả những điều với các mã như sau:

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

Hope sẽ có một người mạnh mẽ tại Vue một d cung cấp một câu trả lời mới để móc nó chính xác hơn.

Answer 3

Để đảm bảo rằng tất cả các thành phần con cũng đã được gắn kết, sử dụng vm.$nextTick - sạch hơn nhiều so với một setTimeout:

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

Nguồn: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 4

Trước khi kết thúc mẫu/html bạn có thể viết:

{{ updated() }} 

Tôi hy vọng điều đó sẽ hữu ích.