唯品秀前端博客

最近在用Nuxt3做个demo,将博客页面直接扣出来作为模板,发现一个神奇的bug,页面组件内容被渲染了两次,经过反复排查确认了原因,我踩过的坑大家就没必要再踩,特此记录一下最近学习nuxt3遇到的一些坑

一、组件被渲染了两次

检查page页面template中出否出现body标签,nuxt会把page页面自动渲染到body中,如果页面组件中再包含body标签,nuxt就会把当前页面内容渲染两次

二、前进后退短暂样式缺失

从我抓取到的截图可以看出,css是在html加载完成后塞进去的,此时能看到css这行代码,但还未解析,页面前进后腿过程中初始化css比页面晚加载渲染,这个问题不排除是bate版本的bug,我是将公共全局main_min.css配置在nuxt.config的css中出现这个问题,于是尝试放在layout组件的页面头部组件中,自然一样能达到所有页面被引用的目的,神奇的是在layout头部header组件去引用竟然没这个问题

懒加载组件

说实话,nuxt3的组件懒加载这块我没看懂什么滑头,感觉和vue自身的v-if没啥区别,采坑:注意懒加载组件命名不要和page页面名字一样,否则调用渲染有问题,而且我在测试过程中用LazyTest进行懒加载组件命名时候,页面必须要用lazyTest开头小写去调用,而其它名字没问题,这个bug很神奇,不知道是否因为目前nuxt3还是bate版本bug问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>
1
2
3
4
<template>
  <p>使用一个懒加载的组件</p>
  <lazyMountainsList v-if="show" /> // 如果懒加载组件用LazyTests,看看LazyTests大驼峰命名能否页面直接调
</template>

根组件节点只能有一个

其实这个问题写过vue2的大家都知道,不过在vue3中并没有要求组件根节点是唯一的,但是在目前nuxt3中还是得要求组件根节点是唯一,否则在跳转过程中可能会报错Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

如何在组件中使用异步数据?

如果组件不是和路由绑定的页面组件,原则上是不可以使用异步数据的。因为 Nuxt.js 仅仅扩展增强了页面组件的 data 方法,使得其可以支持异步数据处理。

对于非页面组件,有两种方式可以实现数据的异步获取:

在组件的 mounted 方法里面实现异步获取数据的逻辑,之后设置组件的数据,限制是:不支持服务端渲染。

在页面组件的asyncData或fetch方法中进行 API 调用,并将数据作为props传递给子组件。服务器渲染工作正常。缺点:asyncData或页面提取可能不太可读,因为它正在加载其他组件的数据。总之,使用哪种方法取决于你的应用是否需要支持子组件的服务端渲染。

学习参考资料

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(0) 打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"Nuxt3踩坑经验贴-荆棘载途的坑我来踩,免费的知识大家一起学"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏