Móc vòng đời 'được cập nhật' của Vue
Ví dụ
Sử dụng móc vòng đời updated
để viết thông báo vào bảng điều khiển mỗi khi cây DOM được cập nhật.
export default {
data() {
return {
sliderVal: 50,
renderCount: 0
}
},
updated() {
this.renderCount++;
console.log('Updated ' + this.renderCount + ' times.')
}
}
Chạy Ví dụ »Định nghĩa và cách sử dụng
Móc vòng đời updated
xảy ra ngay sau khi cây DOM được cập nhật.
Nếu chúng ta sửa đổi một thuộc tính hoặc làm điều gì đó khác trong hook updated
để kích hoạt một kết xuất mới, thì hook updated
sẽ được gọi lại sau kết xuất mới đó và rất có thể chúng ta đã tạo một vòng lặp vô hạn.
Để tránh vòng lặp vô hạn, chúng ta nên luôn cân nhắc sử dụng móc vòng đời beforeUpdate
thay vì móc vòng đời updated
.
Các hàm this.$nextTick()
hoặc nextTick()
cũng có thể được sử dụng để chạy mã sau khi DOM được cập nhật.
Lưu ý: Trong ví dụ trên, chúng tôi ghi số lần hiển thị vào bảng điều khiển vì việc thực hiện các thay đổi đối với chế độ xem sẽ kích hoạt lại hook updated
và tạo ra một vòng lặp vô hạn.
Trang liên quan
Hướng dẫn về Vue: Móc vòng đời của Vue
Hướng dẫn về Vue: Hook 'trướcUpdate'
Tham khảo Vue: Móc vòng đời Vue 'trướcUpdate'
Tham khảo Vue: Phương thức Vue $nextTick()