<template> <div class="exam" ref="exam" :class="data"> {{ data }} </div> </template> <script> export default { props: ["propData"], data() { console.log("data", this.propData); console.log("----------------------------------"); return { data: this.propData, }; }, computed: { computedData() { console.log("computed", this.data + "!!!"); console.log("----------------------------------"); return this.data + "!!!"; }, }, watch: { computedData: { immediate: true, handler() { console.log("watch"); console.log("----------------------------------"); }, }, }, methods: { myMethod() { console.log("method initialized"); console.log("----------------------------------"); }, }, beforeCreate() { console.log("beforeCreate"); console.log("props", this.$props); console.log("----------------------------------"); }, created() { this.myMethod(); console.log("created"); console.log("----------------------------------"); }, beforeMount() { console.log("beforeMount"); console.log("----------------------------------"); setTimeout( function () { console.log("데이터 변화 전 -", this.data); this.data = "안녕히 가세요"; console.log("데이터 변화 후 -", this.data); console.log("----------------------------------"); }.bind(this), 1000 ); }, mounted() { console.log("mounted"); console.log("refs", this.$refs.exam); console.log("el", this.$el); console.log("----------------------------------"); }, beforeUpdate(e) { console.log("beforeUpdate"); console.log("data", this.data); console.log("ref", this.$refs.exam.textContent); console.log("----------------------------------"); }, updated() { console.log("updated"); console.log("data", this.data); console.log("ref", this.$refs.exam.textContent); console.log("----------------------------------"); }, beforeUnmount() { console.log("beforeUnmount"); console.log("this", this); console.log("----------------------------------"); }, unmounted() { console.log("unmounted"); console.log("----------------------------------"); }, }; </script>