기사 디렉토리
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 매개 변수를 받을 수 있습니다.
export default {
props: [ id ],
methods: {
getParamsId() {
return this.id
}
}
}
함수 패턴을 통해 소품을 반환할 수도 있습니다.
const router = new VueRouter({
routes: [{
path: /user/:id ,
component: User,
props: (route) => ({
id: route.query.id
})
}]
})
2. 기능성 성분
기능적 구성 요소는 상태가 없으며 인스턴스화할 수 없으며 수명 주기나 메서드가 없습니다. 기능적 구성 요소를 만드는 것도 간단합니다. 템플릿에 함수 선언을 추가하기만 하면 됩니다. 일반적으로 외부 데이터 변경에만 의존하는 구성 요소에 적합하며 경량으로 인해 렌더링 성능이 향상됩니다. 구성 요소에 필요한 모든 것은 context 매개 변수를 통해 전달됩니다. 컨텍스트 개체입니다. 특정 속성에 대한 설명서를 참조하십시오. 여기서 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 전처리기에서 스타일 침투를 사용하여 적용합니다. >>> 또는 /deep/을 사용하여 이 문제를 해결할 수 있습니다.
<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)
}
}
}
딥 리스닝이 객체를 청취할 때 객체의 내부 속성이 변경되면 시계가 트리거되지 않으므로 딥 리스닝을 설정할 수 있습니다.
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>