vue3&nuxt3踩坑笔记

一般配置先不做记录，具体参考官方文档
Nuxt3文档地址： https://nuxt.com/docs/getting-started/introduction


本文所有代码均默认在setup中…

定义数据

1. 需要先从vue中引入(nuxt3无需，仅纯vue3需要)；
2. 需要将数据定义在最顶部（nuxt中似乎没有变量提升）

import { ref, reactive } from "vue";    // 仅vue3需要，nuxt3不需要引入

// console.log(isInView)  // error: 没有变量提升

const isInView = ref(false)
const state = reactive({})

onMounted

Nuxt3: 在setup中直接使用onMounted等钩子
vue3: 需要先引入，再在setup中使用onMounted等钩子

import { onMounted } from "vue";    // 仅vue3需要，nuxt3不需要引入

onMounted(() => {
    // do sth..
});

组件使用：

vue3正常使用，仅介绍nuxt3下使用

1. ~/components文件夹下组件无需引入直接使用；
2. 想让组件仅在客户端下加载，这样命名：xxxxx.client.vue, 这样使用：<xxxxx />；
3. 想让组件懒加载，这样名称：lazy.xxx.vue, 这样使用：<lazyXxx />；
4. 文件夹下组件怎么使用？
   eg: 文件路径： ~/components/about/xxxx.vue
<AboutXxx />

强制刷新组件

给使用的组件加key即可

<banner :key="new Date.getTime()"/>