TIL 75일_2차

◆ 뷰 인스턴스의 생성 시점에 따른 간섭 처리 구현

• create 시점에서는 데이터가 생성된다.
• mount 시점에서는 화면이 생성된다. (=화면에 Vue가 부착된다.)
• update 시점에서는 화면이 변경된다.
• created, mounted를 주로 사용한다.
• updated는 (1데이터를 되돌리는)이전 화면을 백업하기 위한 용도로 사용한다.

           
    beforeCreate(){
    //생성 전에는 데이터가 없다.
    console.log("before create");
    console.log(this.studyList);
    },
    created(){
    //생성 후에는 데이터가 있다.
    console.log("after create");
    console.log(this.studyList);
    },
    beforeMount(){
    //마운트 전에는 v-로 만든 화면이 존재하지 않는다.
    console.log("before mount");
    console.log(document.querySelectorAll(".row"));
    },
    mounted(){
    //마운트 후에는 v-로 만든 화면이 모두 존재한다.
    console.log("after mount");
    console.log(document.querySelectorAll(".row"));
    },
    beforeUpdate(){
    //업데이트 전에는 데이터가 바뀌기 전 상태이다.
    console.log("before mount");
    console.log(document.querySelectorAll(".row"));
    },
    updated(){
    //업데이트 후에는 데이터가 바뀐 후 상태이다.
    console.log("after mount");
    console.log(document.querySelectorAll(".row"));
    }