🔒 컴포넌트 생성 시 필수적으로 이름을 지정한다

Modified: 2022.05.10

// ❌ wrong
export default {
    name: 'Todo',
    ...
}
 
// ⭕ correct
export default {
    name: 'TodoItem',
    ...
}

이름은 항상 파일명과 동일하게 작성하고, 항상 합성어를 사용하여 작성한다.

모든 HTML 엘리먼트의 이름은 한 단어이기 때문에 합성어를 사용하지 않는다면 향후 HTML 요소와의 충돌 가능성이 있다.

🔒 컴포넌트 내부 property를 해당 순서대로 작성한다

Modified: 2022.05.10

<script>
    export default {
        name: '',
        components: {},
        mixins: [],
        props: {}.
        data() {
            return {
            }
        },
        watch: {},
        computed: {},
        methods: {},
        created() {},
        mounted() {},
        updated() {},  // 사용을 지양한다. 대신, watch와 computed로 해결을 한다.
        destroyed() {}
    }
</script>

컴포넌트 확인 시 가독성을 위해 해당 순서대로 작성한다.

🔒 Element 내부 property를 해당 순서대로 작성한다

Modified: 2022.05.10

1. v-if, v-for (하나의 태그 내에서 사용하지 않도록 함)

2. :key

3. props (동적 할당이 우선적으로 배치)