Nội dung đã được lấy từ Tác giả Adrià Fontcuberta
Tài liệu Vue cho biết:
Vue.nextTick ([gọi lại, ngữ cảnh])
Trì hoãn lệnh gọi lại được thực thi sau chu kỳ cập nhật DOM tiếp theo. Sử dụng nó ngay sau khi bạn đã thay đổi một số dữ liệu để chờ cập nhật DOM.
Hmm ..., nếu lúc đầu cảm thấy đáng sợ, đừng lo lắng, tôi sẽ cố gắng giải thích nó càng đơn giản càng tốt. Nhưng trước tiên, có 2 điều bạn nên biết:
Việc sử dụng nó là không phổ biến. Giống như một trong những thẻ ma thuật bạc đó. Tôi đã viết một số Vueứng dụng và chạy vào nextTick () một hoặc hai lần.
Sẽ dễ hiểu hơn khi bạn đã thấy một số trường hợp sử dụng thực tế. Sau khi bạn có ý tưởng, nỗi sợ hãi sẽ biến mất, và bạn sẽ có một công cụ tiện dụng dưới thắt lưng.
Vậy thì hãy bắt đầu.
Hiểu về $ nextTick
Chúng ta là lập trình viên, phải không? Chúng tôi sẽ sử dụng phương pháp phân chia và chinh phục yêu thích của mình để cố gắng dịch mô tả .nextTick()từng chút một. Nó bắt đầu với:
Trì hoãn cuộc gọi lại
Ok, bây giờ chúng tôi biết nó chấp nhận một cuộc gọi lại. Vì vậy, nó trông như thế này:
Vue.nextTick(function () {
// do something cool
});
Tuyệt quá. Cuộc gọi lại này được hoãn lại (đây là cách millenials nói là bị trì hoãn) cho đến khi…
chu kỳ cập nhật DOM tiếp theo.
Được chứ. Chúng ta biết rằng Vue thực hiện cập nhật DOM không đồng bộ . Nó có một cách giữ các bản cập nhật này được “lưu trữ” cho đến khi cần áp dụng chúng. Nó tạo ra một hàng đợi các bản cập nhật và xóa nó khi cần thiết. Sau đó, DOM được “vá” và cập nhật lên phiên bản mới nhất.
Gì?
Hãy để tôi thử lại: Hãy tưởng tượng thành phần của bạn làm điều gì đó thực sự cần thiết và thông minh như this.potatoAmount = 3. Vue sẽ không tự động hiển thị lại thành phần (và do đó là DOM). Nó sẽ xếp hàng các sửa đổi cần thiết. Sau đó, trong lần “đánh dấu” tiếp theo (như trong đồng hồ), hàng đợi được xóa và cập nhật được áp dụng. Tada!
Được chứ! Vì vậy, chúng tôi biết rằng chúng tôi có thể sử dụng nextTick()để chuyển một hàm gọi lại được thực thi ngay sau dữ liệu được thiết lập và DOM đã cập nhật.
Như tôi đã nói trước đó… không thường xuyên như vậy. Phương pháp tiếp cận "luồng dữ liệu" thúc đẩy Vue, React và một cái khác của Google, mà tôi sẽ không đề cập đến, khiến nó hầu như không cần thiết. Tuy nhiên, đôi khi chúng ta cần đợi một số phần tử xuất hiện / biến mất / được sửa đổi trong DOM. Đây là lúc nextTick có ích.
Sử dụng nó ngay sau khi bạn đã thay đổi một số dữ liệu để chờ cập nhật DOM.
Chính xác! Đây là phần định nghĩa cuối cùng mà tài liệu Vue cung cấp cho chúng tôi. Bên trong lệnh gọi lại của chúng tôi, DOM đã được cập nhật để chúng tôi có thể tương tác với phiên bản "cập nhật nhất" của nó.
Chứng minh điều đó
Được rồi được rồi. Xem bảng điều khiển và bạn sẽ thấy rằng giá trị dữ liệu của chúng tôi chỉ được cập nhật bên trong lệnh gọi lại của nextTick:
const example = Vue.component('example', {
template: '<p>{{ message }}</p>',
data: function () {
return {
message: 'not updated'
}
},
mounted () {
this.message = 'updated'
console.log(
'outside nextTick callback:', this.$el.textContent
) // => 'not updated'
this.$nextTick(() => {
console.log(
'inside nextTick callback:', this.$el.textContent
) // => 'not updated'
})
}
})
new Vue({
el: '#app',
render: h => h(example)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app"></div>
Một trường hợp sử dụng
Hãy cố gắng xác định một số trường hợp sử dụng hữu ích cho nextTick.
Hãy tưởng tượng rằng bạn cần thực hiện một số hành động khi một thành phần được gắn kết. NHƯNG! không chỉ thành phần. Bạn cũng cần đợi cho đến khi tất cả các phần tử con của nó được gắn kết và có sẵn trong DOM. Chỉ trích! Hook được gắn của chúng tôi không đảm bảo rằng toàn bộ cây thành phần hiển thị.
Giá như chúng ta có một công cụ để đợi chu kỳ cập nhật DOM tiếp theo…
Hahaa:
mounted() {
this.$nextTick(() => {
// The whole view is rendered, so I can safely access or query
// the DOM. ¯\_(ツ)_/¯
})
}
Tóm lại
Vì thế: nextTick là một cách thoải mái để thực thi một hàm sau khi dữ liệu đã được thiết lập và DOM đã được cập nhật.
Bạn cần đợi DOM, có thể vì bạn cần thực hiện một số chuyển đổi hoặc bạn cần đợi thư viện bên ngoài tải nội dung của nó? Sau đó sử dụng nextTick.
Một số người cũng sử dụng nextTick trong các bài kiểm tra đơn vị của họ như một cách để đảm bảo rằng dữ liệu đã được cập nhật. Bằng cách này, họ có thể kiểm tra "phiên bản cập nhật" của thành phần.
Vue.nextTick () hoặc vm. $ NextTick ()?
Đừng lo lắng. Cả hai đều (gần như) giống nhau. Vue.nextTick()đề cập đến phương thức API toàn cầu, trong khi vm.$nextTick()là một phương thức phiên bản. Sự khác biệt duy nhất là vm.$nextTickkhông chấp nhận ngữ cảnh làm tham số thứ hai. Nó luôn bị ràng buộc với this(còn được gọi là bản thân instance).
Một phần cuối cùng của sự mát mẻ
Lưu ý rằng nextTicktrả về mộtPromise , vì vậy chúng ta có thể làm đầy đủ async/awaitvà cải thiện ví dụ:
async mounted () {
this.message = 'updated'
console.log(this.$el.textContent) // 'not updated'
await this.$nextTick()
console.log(this.$el.textContent) // 'updated'
}
nextTick. Tài liệu ở đây .