Phương thức Vue $nextTick()
Ví dụ
Sử dụng phương thức $nextTick() để đợi DOM cập nhật trước khi chúng tôi nhận được thông báo bên trong thẻ <p> .
methods: {
updateMsg() {
this.message = '"Hello! This is a new message."';
this.results.push(this.$refs.pEl.textContent);
this.$nextTick(() => {
this.results.push(this.$refs.pEl.textContent + ' (using $nextTick())');
});
}
}
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Phương thức $nextTick() đợi DOM cập nhật trước khi thực thi.
Chúng tôi sử dụng this.$nextTick() để đợi chu kỳ cập nhật DOM của thành phần Vue hiện tại kết thúc.
| Argument | Description |
|---|---|
| callback function | Optional. The callback function provided will run after the DOM is updated (see the example above). The $nextTick() method can also be used without an argument (see the example below). |
Ngoài this.$nextTick() còn có một phương thức toàn cục nextTick() có thể được sử dụng để đợi DOM cập nhật ngay cả từ bên ngoài phạm vi của một thành phần cụ thể.
Lưu ý: Trong Vue, khi một biến phản ứng bị thay đổi, DOM sẽ không được cập nhật ngay lập tức. Thay vào đó, Vue lưu những thay đổi này và áp dụng chúng khi 'đánh dấu tiếp theo' xảy ra. Điều này nhằm nâng cao hiệu suất và đảm bảo tính nhất quán giữa phiên bản Vue và DOM.
Thêm ví dụ
Ví dụ
Có thể đạt được kết quả tương tự như trong ví dụ đầu tiên bằng cách gọi phương thức $nextTick() với tiền tố await trong một phương thức không đồng bộ. Điều này khiến các dòng mã tiếp theo bị tạm dừng cho đến khi 'đánh dấu tiếp theo' xảy ra.
<template>
<h2>Example $nextTick() Method</h2>
<p>Using "await $nextTick()", the next lines of code will also wait until the 'next tick' happens.
</p>
<div>
<p ref="messageEl">{{ message }}</p>
<button v-on:click.once="updateMsg">Update Message</button>
<ol>
<li v-for="x in results">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
message: "Initial Message",
results: []
};
},
methods: {
async updateMsg() {
this.message = "Hello! This message is now updated.";
this.results.push(this.$refs.messageEl.textContent);
await this.$nextTick();
this.results.push(this.$refs.messageEl.textContent + ' (after await $nextTick())');
}
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
Chạy ví dụ »Trang liên quan
Hướng dẫn JavaScript: JavaScript Async
Hướng dẫn Vue: Phương thức Vue
Hướng dẫn về Vue: Tham khảo mẫu Vue
Hướng dẫn Vue: Vue v-on
Hướng dẫn Vue: Công cụ sửa đổi sự kiện Vue
Tham chiếu Vue: Thuộc tính Vue 'ref'
Tham chiếu Vue: Đối tượng Vue $refs
