[편집 및 공유] 8가지 실용적인 Vue 개발 팁

이 글은 라우팅 매개변수 디커플링, 기능적 구성 요소, 스타일 범위, watch의 고급 사용, 다중 변수 감시 등을 포함한 8가지 훌륭한 Vue 개발 기술을 정리하고 공유합니다. 모든 사람에게 도움이 되기를 바랍니다!

1. 경로 매개변수 분리

일반적으로 구성 요소에서 경로 매개 변수를 사용할 때 대부분의 사람들은 다음을 수행합니다.

export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

구성 요소에서 $route를 사용하면 해당 경로에 대한 강력한 결합이 발생하여 구성 요소를 특정 URL로 제한하여 구성 요소의 유연성이 제한됩니다. 올바른 접근 방식은 소품을 통해 분리하는 것입니다.

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: true
    }]
})

라우트의 props 속성을 true로 설정한 후 컴포넌트는 컴포넌트 내부의 props를 통해 params 매개변수를 받을 수 있습니다. [관련 추천: vuejs 영상 튜토리얼, 웹 프론트엔드 개발]

export default {
    props: [ id ],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

기능 모드를 통해서도 props를 반환할 수 있습니다.

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

2. 기능적 구성 요소

기능적 구성 요소는 상태 비저장이며 인스턴스화할 수 없으며 수명 주기나 메서드가 없습니다. 기능적 구성 요소를 만드는 것도 템플릿에 기능 선언을 추가하는 것만큼 간단합니다. 일반적으로 외부 데이터 변경에만 의존하는 구성 요소에 적합하며, 가볍기 때문에 렌더링 성능이 향상됩니다. 구성요소에 필요한 모든 것은 컨텍스트 매개변수를 통해 전달됩니다. 이는 컨텍스트 개체입니다. 특정 속성에 대한 설명서를 참조하세요. 여기서 props는 모든 바인딩된 속성을 포함하는 객체입니다.

<template functional>
    <div class="list">
        <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
            <p>{{item.title}}</p>
            <p>{{item.content}}</p>
        </div>
    </div>
</template>

상위 구성 요소는

<template>
    <div>
        <List :list="list" :itemClick="item => (currentItem = item)" />
    </div>
</template>

import List from  @/components/List.vue
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title:  title ,
                content:  content
            }],
            currentItem:
        }
    }
}

3. 스타일 범위

개발 중에 타사 구성 요소의 스타일을 수정하는 것이 일반적이지만 범위가 지정된 속성의 스타일 격리로 인해 다음이 필요할 수 있습니다. 범위를 제거하거나 새 스타일을 만드세요. 이러한 관행에는 부작용(구성 요소 스타일 오염, 우아함 부족)이 있으며 CSS 전처리기의 스타일 침투를 사용하여 구현됩니다. 이 문제를 해결하기 위해 >>>를 사용할 수 있습니다:

<style scoped>
Outer layer >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

4. watch

watch의 고급 사용은 리스너 속성이 변경될 때 발생합니다. 구성 요소가 생성되어 즉시 실행됩니다. 떠올릴 수 있는 한 가지 방법은 생성 수명 주기 동안 한 번 호출하는 것입니다. 하지만 이는 작성하기에 우아한 방법이 아니므로 이와 같은 것을 사용할 수도 있습니다.

export default {
    data() {
        return {
            name:  Joe
        }
    },
    watch: {
        name: {
            handler:  sayName ,
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

Deep Listening

객체를 들을 때 객체 내부의 속성이 변경되면 시계가 트리거되지 않으므로 딥 리스닝을 설정할 수 있습니다.

export default {
    data: {
        studen: {
            name:  Joe ,
            skill: {
                run: {
                    speed:  fast
                }
            }
        }
    },
    watch: {
        studen: {
            handler:  sayName ,
            deep: true
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

리스너를 트리거하여 여러 메소드를 실행

배열을 사용하면 문자열, 함수 및 개체를 포함한 여러 형식을 설정할 수 있습니다.

export default {
    data: {
        name:  Joe
    },
    watch: {
        name: [
             sayName1 ,
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler:  sayName3 ,
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log( sayName1==> , this.name)
        },
        sayName2() {
            console.log( sayName2==> , this.name)
        },
        sayName3() {
            console.log( sayName3==> , this.name)
        }
    }
}

5.watch는 여러 변수를 모니터링합니다

watch 자체는 여러 변수를 모니터링할 수 없습니다. 그러나 계산된 속성이 있는 객체를 반환한 다음 해당 객체를 수신함으로써 "여러 변수를 수신"할 수 있습니다.

export default {
    data() {
        return {
            msg1:  apple ,
            msg2:  banana
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log( msg1 is change )
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log( msg2 is change )
                }
            },
            deep: true
        }
    }
}

6. 이벤트 매개변수 $event

$event는 특정 시나리오에서 복잡한 기능을 구현하는 데 더 많은 사용 가능한 매개변수를 제공하는 이벤트 개체의 특수 변수입니다. 네이티브 이벤트: 네이티브 이벤트의 기본 이벤트 객체와 동일하게 동작합니다.

<template>
    <div>
        <input type="text" @input="inputHandler( hello , $event)" />
    </div>
</template>

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}

맞춤 이벤트: 하위 구성 요소에서 발생한 값을 캡처하기 위해 맞춤 이벤트로 표현됩니다.

export default {
    methods: {
        customEvent() {
            this.$emit( custom-event ,  some value )
        }
    }
}

<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
            </my-list>
    </div>
</template>

export default {
    methods: {
        customEvent(index, e) {
            console.log(e) //  some value
        }
    }
}

7. 프로그래밍 방식 이벤트 리스너

예를 들어 페이지가 마운트될 때 타이머를 정의하고 페이지가 삭제될 때 타이머를 지워야 합니다. 이것은 문제가 되지 않는 것 같습니다. 그러나 자세히 살펴보면 this.timer의 유일한 목적은 beforeDestroy에서 타이머 번호를 얻을 수 있는 것입니다. 그렇지 않으면 쓸모가 없습니다.

export default {
    mounted() {
        this.timer = setInterval(() => {
            console.log(Date.now())
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}

가능하다면 수명 주기 후크에만 액세스하는 것이 가장 좋습니다. 이는 심각한 문제는 아니지만 혼란스러운 것으로 간주될 수 있습니다. 페이지 수명 주기 파괴를 수신하기 위해 또는 한 번을 사용하여 이 문제를 해결할 수 있습니다.

export default {
    mounted() {
        this.creatInterval( hello )
        this.creatInterval( world )
    },
    creatInterval(msg) {
        let timer = setInterval(() => {
            console.log(msg)
        }, 1000)
        this.$once( hook:beforeDestroy , function() {
            clearInterval(timer)
        })
    }
}

使用这种方法，即使我们同时创建多个定时器，也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监听组件生命周期通常我们使用 $emit 监听组件生命周期，父组件接收事件进行通知。

子组件

export default {
    mounted() {
        this.$emit( listenMounted )
    }
}

父组件

<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>

其实有一种简单的方法就是使用@hook 来监听组件的生命周期，而不需要在组件内部做任何改动。同样，创建、更新等也可以使用这个方法。

<template>
    <List @hook:mounted="listenMounted" />
</template>

（学习视频分享：vuejs入门教程、编程基础视频）

위 내용은 [편집 및 공유] 8가지 실용적인 Vue 개발 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!