Sự khác biệt giữa các sự kiện được tạo và gắn kết trong Vue.js

Tài liệu Vue.js mô tả createdvà mountedcác sự kiện như sau:

created

Được gọi đồng bộ sau khi thể hiện được tạo. Ở giai đoạn này, cá thể đã xử lý xong các tùy chọn có nghĩa là các tùy chọn sau đã được thiết lập: quan sát dữ liệu, thuộc tính được tính toán, phương thức, gọi lại theo dõi / sự kiện. Tuy nhiên, giai đoạn gắn kết chưa được bắt đầu và tài sản $ el sẽ không có sẵn.

mounted

Được gọi sau khi cá thể vừa được gắn kết, trong đó el được thay thế bằng vm. $ El mới được tạo. Nếu phiên bản gốc được gắn vào một phần tử trong tài liệu, vm. $ El cũng sẽ có trong tài liệu khi được gắn kết được gọi.

Móc này không được gọi trong quá trình kết xuất phía máy chủ.

Tôi hiểu lý thuyết, nhưng tôi có 2 câu hỏi liên quan đến thực hành:

1. Có trường hợp nào createdsẽ được sử dụng hơn mounted?
2. Tôi có thể sử dụng createdsự kiện này để làm gì, trong tình huống thực tế (mã thực)?

created() : vì quá trình xử lý các tùy chọn kết thúc, bạn có quyền truy cập vào phản ứng data các thuộc tính và thay đổi chúng nếu bạn muốn. Ở giai đoạn này DOM chưa được gắn hoặc thêm. Vì vậy, bạn không thể thực hiện bất kỳ thao tác DOM nào ở đây

mounted(): được gọi sau khi DOM đã được gắn hoặc kết xuất. Tại đây, bạn có quyền truy cập vào các phần tử DOM và thao tác DOM có thể được thực hiện, ví dụ, lấy phần bên trongHTML:

console.log(element.innerHTML)

Vì vậy, câu hỏi của bạn:

1. Is there any case where created would be used over mounted?

Tạo thường được sử dụng để tìm nạp dữ liệu từ API phụ trợ và đặt nó thành thuộc tính dữ liệu. Nhưng trong mounted()hook SSR không có mặt, bạn cần thực hiện các tác vụ như chỉ tìm nạp dữ liệu trong hook đã tạo

2. What can I use the created event for, in real-life (real-code) situation?

Để tìm nạp bất kỳ dữ liệu cần thiết ban đầu nào được hiển thị (như JSON) từ API bên ngoài và gán nó cho bất kỳ thuộc tính dữ liệu phản ứng nào

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}