Vue 3가지 팁/트릭
VNode 후크
On each component or HTML tags, we can use some special (undocumented) hooks as event listeners. The hooks are:
-
onVnodeBeforeMount
-
onVnodeMounted
-
onVnodeBeforeUpdate
-
onVnodeUpdated
-
onVnodeBeforeUnmount
-
onVnodeUnmounted
I mainly use onVnodeMounted
on components when I need to execute some code when the component is mounted or onVnodeUpdated
to debug when something is updated but I am quite sure all of them can come in handy in some cases.
Example:
<script setup>
import { ref } from 'vue'
const count = ref(0)
function onMyComponentMounted() {}
function divThatDisplaysCountWasUpdated() {}
</script>
<template>
<MyComponent @vnodeMounted="onMyComponentMounted" />
<div @vnodeUpdated="divThatDisplaysCountWasUpdated">{{ count }}</div>
</template>
It should be noted, that these hooks pass some arguments to the callback function. They pass only one argument which is the current VNode except for onVnodeBeforeUpdate
and onVnodeUpdated
that pass two arguments, the current VNode and the previous VNode.
디버깅 후크
We all know the lifecycle hooks that Vue provides us. But did you know that Vue 3 gives us two hooks that we can use for debugging purposes? They are:
onRenderTracked
는 추적된 모든 반응 종속성에 대해 호출됩니다.<script setup>
import { ref, onRenderTracked } from 'vue'
const count = ref(0)
const count2 = ref(0)
// It will be called twice, once for count and once for count2
onRenderTracked((event) => {
console.log(event)
})
</script>
onRenderTriggered
는 반응성 업데이트를 트리거할 때 호출되거나 문서에서 "반응성 종속성이 구성 요소의 렌더링 효과를 다시 실행하도록 트리거할 때"라고 말합니다.<script setup>
import { ref, onRenderTriggered } from 'vue'
const count = ref(0)
// It will be called when we update count
onRenderTriggered((event) => {
debugger
})
</script>
자식 구성 요소에서 슬롯 노출
If you use a third-party component, chances are that you wrap the implementation of it in your own "wrapper" component. This is a good practice and scalable solution, but in that way, the slots of that third-party component are getting lost and we should find a way to expose them to the parent component:
WrapperComponent.vue
<template>
<div class="wrapper-of-third-party-component">
<ThirdPartyComponent v-bind="$attrs">
<!-- Expose the slots of the third-party component -->
<template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}"></slot>
</template>
</ThirdPartyComponent>
</div>
</template>
Now every component that uses WrapperComponent
can use the slots of ThirdPartyComponent
🎉.
범위가 지정된 스타일과 다중 루트 노드는 함께 잘 작동하지 않습니다.
In Vue 3 we can finally have more than "one root node" components. That is great, but personally I fall into a design limitation when doing that. Imagine we have a child component:
<template>
<p class="my-p">First p</p>
<p class="my-p">Second p</p>
</template>
And a parent component:
<template>
<h1>My awesome component</h1>
<MyChildComponent />
</template>
<style scoped>
// There is no way to style the p tags of MyChildComponent
.my-p { color: red; }
:deep(.my-p) { color: red; }
</style>
There is no way from the scoped styling of the multi root parent component to style the child component's p tags.
So in short, a multi-root component, can't target multi-root child component's styles with scoped styles.
The best way to fix that, would be to wrap the parent or child component (or both) so we have only one root element.
But if you absolutely need both to have multi-root nodes, you can:
- Use a non-scoped style
<style>
.my-p { color: red; }
</style>
- Use CSS Modules
<template>
<h1>My awesome component</h1>
<MyChildComponent :class="$style.trick" />
</template>
<style module>
.trick {
color: red;
}
</style>
Since we are specifying a class here, then the multi-root child component has to explicitly specify the attribute fallthrough behavior.
If you want my opinion, unless you absolutely need a multi-root node component, go with a single root node and don't deal with this design limitation at all.
CSS 선택자를 사용할 때 주의하십시오
#main-nav > li {}
will be many times slower compared to .my-li { color: red }
. From the docs:
I highly recommend you to read Efficiently Rendering CSS 이 주제에 대해 더 자세히 알고 싶다면Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit.
부울 캐스팅
In Vue 2 or early versions of Vue 3, for props with Boolean types we had different behavior depending on the order:
1st case:
props: {
hoverColor: [String, Boolean] // <- defaults to ''
}
2nd case:
props: {
hoverColor: [Boolean, String] // <- defaults to false
}
Not only that, but if you pass the prop like this:
<my-component hover-color></my-component>
In the first case, it would be an empty string ''
. In the second case, it would be true
.
As you can see, this was a bit confusing and inconsistent. Fortunately, in Vue 3, we have a new behavior that is consistent and predictable:
Boolean
behavior will apply regardless of type appearance order.
So:
hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false
v-for가 포함된 템플릿 참조 - 순서가 보장되지 않음
remember this one so you don't lose hours of debugging trying to figure out what is going on
In the code below:
<script setup>
import { ref } from "vue";
const list = ref([1, 2, 3]);
const itemRefs = ref([]);
</script>
<template>
<ul>
<li v-for="item in list" ref="itemRefs" :key="item">
{{ item }}
</li>
</ul>
</template>
we are looping over the list
array, and we create the itemRefs
array.
itemRefs
is not guaranteed to have the same order as list
array.
기사 종료
더 많은 팁과 요령이 있지만 이 글은 이미 길어졌습니다. 가까운 시일 내에 더 나은 팁/요령으로 또 다른 기사를 기대하십시오.
읽어 주셔서 감사합니다. 어떤 피드백이든 대단히 감사합니다!
Vue.js 개발자를 고용하는 멋진 회사를 알고 계십니까?
또한 새로운 일자리를 찾고 있으니 시니어 Vue.js 개발자를 채용하고 있는 멋진 회사를 알고 계시다면 [email protected]으로 연락주세요 🙏.
Reference
이 문제에 관하여(Vue 3가지 팁/트릭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/the_one/vue-3-tipstricks-i-guarantee-you-didnt-know-49ml텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)