你需要知道的 7 个 Vue3 技巧

更新日期: 2022-12-09阅读: 1.7k标签: Vue3

VNode 钩子

在每个组件或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>

应该注意的是,这些挂钩将一些参数传递给回调函数。它们只传递一个参数,即当前 VNode,除了onVnodeBeforeUpdate传递onVnodeUpdated两个参数,当前 VNode 和前一个 VNode。

调试挂钩

我们都知道 Vue 为我们提供的生命周期钩子。但是您知道 Vue 3 为我们提供了两个可用于调试目的的钩子吗?他们是:

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>

从子组件公开插槽

如果您使用第三方组件,您可能会将其实现包装在您自己的“包装器”组件中。这是一个很好的实践和可扩展的解决方案,但那样的话,第三方组件的插槽就会丢失,我们应该找到一种方法将它们暴露给父组件:

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>

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


作用域样式和多根节点不能很好地协同工作

在 Vue 3 中,我们终于可以拥有不止“一个根节点”的组件。这很好,但我个人在这样做时遇到了设计限制。假设我们有一个子组件:

<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>
// There is no way to style the p tags of MyChildComponent
.my-p { color: red; }
:deep(.my-p) { color: red; }
</style>

无法从多根父组件的作用域样式设置子组件的 p 标签的样式。

所以简而言之,一个多根组件,不能使用作用域样式来定位多根子组件的样式。

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

但是如果你绝对需要两者都有多根节点,你可以:

  • 使用非作用域样式
<style>
.my-p { color: red; }
</style>
  • 使用 css 模块
<template>
    <h1>My awesome component</h1>
    <MyChildComponent :class="$style.trick" />
</template>

<style module>
.trick {
    color: red;
}
</style>

既然我们在这里指定了一个类,那么多根子组件就得显式指定属性 fallthrough 行为。

如果你想要我的意见,除非你绝对需要一个多根节点组件,否则请使用单个根节点并且根本不要处理这个设计限制。


使用 CSS 选择器时要小心

#main-nav > li {}将比 . 慢很多倍.my-li { color: red }。从文档:

由于浏览器呈现各种 CSS 选择器的方式,p { color: red } 在范围内(即与属性选择器结合使用时)会慢很多倍。如果您改用类或 ID,例如在 .example { color: red } 中,那么您几乎可以消除性能损失。

如果您想更深入地研究这个主题,我强烈建议您阅读Efficiently Rendering CSS 。

布尔转换

在 Vue 2 或 Vue 3 的早期版本中,对于具有布尔类型的道具,我们根据顺序有不同的行为:

第一种情况:

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

第二种情况:

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

不仅如此,如果你像这样传递 prop:

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

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

如您所见,这有点混乱和不一致。幸运的是,在 Vue 3 中,我们有一个一致且可预测的新行为:

Boolean无论类型出现顺序如何,行为都将适用。

所以:

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


带有 v-for 的模板引用 - 不能保证顺序

记住这个,这样你就不会浪费数小时的调试时间来弄清楚发生了什么

在下面的代码中:

<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://dev.to/the_one/vue-3-tipstricks-i-guarantee-you-didnt-know-49ml


链接: https://fly63.com/article/detial/12251

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!