保证你不知道的Vue 3技巧

Posted @大迁世界

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了保证你不知道的Vue 3技巧相关的知识,希望对你有一定的参考价值。

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

VNode hooks

在每个组件或html标签上,我们可以使用一些特殊的(文档没写的)钩子作为事件监听器。这些钩子有:

  • onVnodeBeforeMount
  • onVnodeMounted
  • onVnodeBeforeUpdate
  • onVnodeUpdated
  • onVnodeBeforeUnmount
  • onVnodeUnmounted

我主要是在组件上使用onVnodeMounted,当需要在组件挂载时执行一些代码,或者在更新时使用onVnodeUpdated进行调试,可以确定的是所有这些钩子都能在某些情况下派上用场。

例如:

<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>

需要注意的是,这些钩子向回调函数传递一些参数。除了onVnodeBeforeUpdateonVnodeUpdated传递两个参数,即当前的VNode和之前的VNode,其它只传递一个参数,即当前的VNode

Debugging hooks

我们都知道Vue为我们提供的生命周期钩子。但你可能不知道,Vue3 同时也给了我们两个钩子,可以用于调试的?它们是:

当响应式依赖的变更触发了组件渲染时会调用 onRenderTracked

<script setup>
import  ref, onRenderTracked  from 'vue'

const count = ref(0)
const count2 = ref(0)

// 这里被调用两次,一次用于计数,一次用于计数2
onRenderTracked((event) => 
    console.log(event)
)
</script>

注册一个调试钩子,当响应式依赖的变更触发了组件渲染时会调用 onRenderTriggered:

<script setup>
import  ref, onRenderTriggered  from 'vue'

const count = ref(0)

// 当我们更新 count 时,它将被调用
onRenderTriggered((event) => 
    debugger
)
</script>

从子组件暴露插槽

有时,我们使用第三方组件时,会把它的实现包装在我们自定义组件中。这是一个很好的做法和可扩展的解决方案,但这样一来,第三方组件的插槽就会丢失,下面方法可以将它们的插槽暴露在父组件中:

WrapperComponent.vue

<template>
  <div class="wrapper-of-third-party-component">
    <ThirdPartyComponent v-bind="$attrs">

        <!-- 暴露第三方组件的插槽  -->
        <template v-for="(_, name) in $slots" #[name]="slotData">
            <slot :name="name" v-bind="slotData || "></slot>
        </template>

    </ThirdPartyComponent>
  </div>
</template>

现在每个使用WrapperComponent的组件都可以使用第三方组件的插槽。

多个根节点的子组件不能从父范围的样式设置样式

在 Vue3 中,我们可以使用多根组件了,这很好,但我遇到了一个设计限制。假设我我们有一个子组件:

<template>
  <p class="my-p">First p</p>
  <p class="my-p">Second p</p>
</template>

还有父组件:

<template>
    <h1>My awesome component</h1>
    <MyChildComponent />
</template>

<style scoped>
// 没有办法为 MyChildComponent 的 p 标签设置样式。
.my-p  color: red; 
:deep(.my-p)  color: red; 
</style>

没有办法从多根父组的scoped style中为子组件的p标签添加样式。

简而言之,具有多个根节点的子组件不能从父范围的样式设置样式

解决这个问题的最好办法是包裹父或子组件(或两者),这样我们就只有一个根元素了。

但如果你就想使用两个根组件,那么可以使用:

scoped 去掉:

<style>
.my-p  color: red; 
</style>

使用 css module:

<template>
    <h1>My awesome component</h1>
    <MyChildComponent :class="$style.trick" />
</template>

<style module>
.trick 
    color: red;

</style>

因为我们在这里指定的是一个类,所以多根子组件必须显式指定属性失效行为。

使用CSS选择器时要小心

#main-nav > li .my-li color: red 相比,速度会慢很多倍。来自文档:

由于浏览器呈现各种CSS选择器的方式,p color: red在限定作用域时(即与属性选择器结合时)会慢很多倍。如果使用类或id代替,例如.example color: red,则实际上消除了这种性能影响。

布尔运算

在 Vue2 或 Vue3 的早期版本中,对于具有布尔类型的 props,我们有不同的行为,取决于顺序。

第一种情况:

props: 
  hoverColor: [String, Boolean] // <- defaults to ''

第二种情况:

props: 
  hoverColor: [Boolean, String] // <- defaults to false

不仅如此,如果像这样传参:

<my-component hover-color></my-component>

在第一种情况下,它将是一个空字符串''。在第二种情况下,它是 true

这有点令人困惑和不一致。幸运的是,在Vue3中,我们有了一种一致且可预测的新行为: 无论顺序如何,都将采用布尔的行为,也就是第二种情况。所以:

hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false

在 v-for 中使用 ref,不能保证顺序

在下面的代码中:

<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>

我们在列表数组上循环,并创建 itemRefs 数组。itemRefs不保证与列表数组有相同的顺序。如果你想了解更多这方面的信息,你可以阅读这个issue

地址:https://github.com/vuejs/core/issues/4010

最后,谢谢大家的阅读。

编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

来源:https://dev.to/the_one/vue-3-tipstricks-i-guarantee-you-didnt-know-49ml

以上是关于保证你不知道的Vue 3技巧的主要内容,如果未能解决你的问题,请参考以下文章

Vue Test Utils 中的“存根子组件”是啥?

Vue中你不知道但却很实用的黑科技

或许你不知道的10条SQL技巧

JavaScript中你不知道的5个JSON-使用技巧

有哪些你不知道的阅读源码的技巧

那些你不知道的js使用技巧