ความแตกต่างระหว่างเหตุการณ์ที่สร้างและเมานต์ใน Vue.js

เอกสาร Vue.js อธิบายcreatedและmountedเหตุการณ์ดังต่อไปนี้:

created

เรียกว่าพร้อมกันหลังจากสร้างอินสแตนซ์ ในขั้นตอนนี้อินสแตนซ์ได้เสร็จสิ้นการประมวลผลตัวเลือกซึ่งหมายความว่ามีการตั้งค่าต่อไปนี้: การสังเกตข้อมูล, คุณสมบัติที่คำนวณได้, วิธีการ, การเรียกกลับ / ดูเหตุการณ์ อย่างไรก็ตามขั้นตอนการติดตั้งยังไม่เริ่มต้นและคุณสมบัติ $ el จะยังไม่พร้อมใช้งาน

mounted

เรียกว่าหลังจากอินสแตนซ์เพิ่งถูกเมาท์โดยที่ el ถูกแทนที่ด้วย vm. $ el ที่สร้างขึ้นใหม่ หากอินสแตนซ์รูทถูกเมาท์กับองค์ประกอบในเอกสาร vm. $ el ก็จะอยู่ในเอกสารเมื่อถูกเมาท์ถูกเรียก

hook นี้ไม่ถูกเรียกระหว่างการเรนเดอร์ฝั่งเซิร์ฟเวอร์

ฉันเข้าใจทฤษฎี แต่ฉันมีคำถาม 2 ข้อเกี่ยวกับการปฏิบัติ:

1. มีกรณีใดบ้างที่createdจะถูกนำไปใช้mounted?
2. ฉันสามารถใช้createdเหตุการณ์สำหรับในสถานการณ์จริง (รหัสจริง) ได้อย่างไร

created(): เนื่องจากการประมวลผลตัวเลือกเสร็จสิ้นคุณจะสามารถเข้าถึงdataคุณสมบัติที่ทำปฏิกิริยาและเปลี่ยนแปลงได้หากคุณต้องการ ในขั้นตอนนี้ DOM ยังไม่ได้ติดตั้งหรือเพิ่ม ดังนั้นคุณไม่สามารถทำการจัดการ DOM ที่นี่

mounted(): เรียกหลังจาก DOM ถูกเมาท์หรือแสดงผลแล้ว ที่นี่คุณสามารถเข้าถึงองค์ประกอบ DOM และการจัดการ DOM สามารถทำได้เช่นรับ InnerHTML:

console.log(element.innerHTML)

ดังนั้นคำถามของคุณ:

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

โดยทั่วไปแล้วการสร้างจะใช้สำหรับดึงข้อมูลจากแบ็กเอนด์ API และตั้งค่าเป็นคุณสมบัติของข้อมูล แต่ใน SSR mounted()hook ไม่มีอยู่คุณต้องดำเนินการเช่นดึงข้อมูลในเบ็ดที่สร้างขึ้นเท่านั้น

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

สำหรับการดึงข้อมูลที่จำเป็นเริ่มต้นใด ๆ ที่จะแสดงผล (เช่น JSON) จาก API ภายนอกและกำหนดให้กับคุณสมบัติข้อมูลปฏิกิริยาใด ๆ

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