Tuy nhiên, nguyên lý hoạt động của nó là gì - chơi bắn cá

Khi tôi sử dụng Vuejs để tạo một trang chức năng đơn giản, ý tưởng là khi trang được tải lên, nó sẽ lấy tọa độ kinh-vĩ độ hiện tại và sau đó sử dụng Ajax để lấy danh sách các khu dân cư lân cận từ phía máy chủ. Tuy nhiên, một lỗi đã xảy ra: chơi bắn cá trước khi danh sách khu dân cư được hiển thị, tên của biến đá gà thomo trực tiếp hôm nay gà đòn Vuejs tương ứng với tên khu dân cư lại bị hiển thị nhấp nháy trong giây lát.

Đoạn mã HTML tại nơi xảy ra sự cố như sau:

1<ul v-for="item in items">
2 <li>{{ item.name }}</li>
3</ul>

Khi trang bắt đầu tải, nội dung sau đây sẽ xuất hiện thoáng qua:

{{ item.name }}

Sau khi tìm kiếm trên Google, tôi phát hiện rằng directive tích hợp sẵn của Vuejs có tên là v-cloak có thể giúp giải quyết vấn đề này. Giải pháp rất đơn giản:

Chúng ta chỉnh sửa đoạn mã HTML thành:

1<ul v-cloak v-for="item in items">
2 <li>{{ item.name }}</li>
3</ul>

Tiếp theo, thêm đoạn CSS sau:

1[v-cloak] {
2 display: none;
3}

Vấn đề đã được giải quyết!

Tuy nhiên, nguyên lý hoạt động của nó là gì?

Đoạn CSS trên có nghĩa là bất kỳ thẻ HTML nào chứa thuộc tính v-cloak sẽ bị ẩn đi trong quá trình khởi tạo trang. Sau khi instance Vuejs hoàn tất việc khởi tạo (sẵn sàng), thuộc tính v-cloak sẽ tự động bị loại bỏ, khiến cho phần tử tương ứng trở nên hiển thị. Vậy thì làm thế nào để xác định khi nào instance Vuejs được coi là "ready"? Điều này đòi hỏi chúng ta phải hiểu xèng rõ về vòng đời của instance Vuejs. Tôi sẽ dành thời gian để sắp xếp và nghiên cứu kỹ hơn sau này.

!cloaking - che giấu như một chiếc áo choàng huyền bí

Một điều thú vị nữa là thuật ngữ "cloak" mang ý nghĩa hình ảnh giống như một chiếc áo choàng ma thuật, dùng để ẩn hoặc che đậy những gì chưa sẵn sàng xuất hiện. Trong trường hợp này, Vuejs đã khéo léo sử dụng khái niệm này để đảm bảo rằng nội dung chỉ hiển thị khi dữ liệu đã được xử lý xong xuôi.