本文主要是介绍【来来来，我看看是谁不点我】Nuxt3入坑记--JS版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
为什么选择Nuxt3呢？
-
老板说要上SSR
-
紧跟潮流
-
Nuxt3对于没有SSR经验的同学来说，是一个不错的选择，简单易用上手轻松。
Nuxt3官方地址
Nuxt3生态圈
Nuxt3官方案例
Nuxt3具有什么优势呢？
- 开发更快
- 打包更小
- 支持 vite
- 支持 vue3
- 支持自动引入
- 支持文件路由
- 支持布局系统
- 支持多种渲染模式
- 支持 typescript
- 支持 composition-api
Nuxt3目录结构
# 目錄說明
# .nuxt 本地运行文件
# .output 打包文件
# assets 静态资源文件（可放css，fonts，images）
# components 自定义组件
# composables 可自定义func或常量
# content 为应用程序创建基于文件的 CMS。用于解析.md .yml .csv .json文件，并呈现内容页面
# env 用于设置当前运行环境的baseUrl等信息
# lang 多语言转换及配置
# layouts 可自行设计可复用的框架布局，并通过NuxtLayout应用到页面中
# middleware 路由中间件，用于操作页面导航。后缀带有.global为全局路由中间件
# pages 各页面均在其中创建，Nuxt3自动配置router
# plugins 插件系统，里面的插件均为自动注册，安装即用。
# server 用于将 API 和服务器处理程序注册到您的应用程序。（即接口配置文件）
# public 静态资源存放，适用于不会被修改的文件。如.ico .text 或 png等静态资源
# utils 在整个应用程序中自动导入实用程序函数。
# .gitignore 用于提交代码前忽略不上传的文件
# .nuxtignore 文件允许 Nuxt 在构建阶段忽略项目根目录中的文件（比如，pages内文件或layouts的文件）
# app.vue 文件是Nuxt应用的主入口文件
# nuxt.config.ts 可对Nuxt应用进行指定配置
# package.json 包含当前应用所使用的依赖，脚本命令
# package-lock.json 当前应用的依赖锁，防止依赖不适配或错乱。
什么是服务端渲染 & 客户端渲染
-
服务端渲染：前端数据依然从后端接口获取，不同的是，查看源代码可以查看到页面被node服务器编译成html输出，页面结构文字信息等在源代码中能够看到，可被浏览器搜索引擎检索到，提高应用的知名度，也提高了网站的首屏加载速度，体验更佳。
-
客户端渲染：前端对接后端接口实现数据渲染，查看源代码展示的是项目下index.html模板代码。对于首屏加载通常需要等到资源加载完成接口请求完成才会渲染数据，这就导致首屏加载变得比较慢，影响体验。
注意：Nuxt3混合了客户端渲染及服务端渲染，即：本地运行环境下也会是服务端渲染，同时也有客户端渲染，如果需要单独隔离出客户端渲染部分，需要使用 <ClientOnly 标签
以下是Nuxt3搭建步骤
- npx create-nuxt-app my-project my-project为你的项目名称
- npm install 下载依赖
- npm run dev 启动本地服务
也可以用 Vue-cli 创建 nuxt 项目
- vue init nuxt/starter 项目名称
- npm install 下载依赖
- npm run dev 启动本地服务
服务端与客户端的生命周期
- 服务端与客户端共有的生命周期
beforeCreate()
created() - 客户端的生命周期
beforeMount() {}
mounted() {}
beforeUpdate() {}
updated() {}
beforeDestroy() {}
destroyed() {}
在Nuxt3中可以直接使用 onMounted，在服务端跟客户端均执行。也可以调用 nuxt3 的钩子函数。但是在服务端渲染期间执行 window 对象 是会报错的，此时是获取不到 window 对象的，此外 ref 对象也是。但是你可以在 onNuxtReady 中获取 window 对象及 ref 对象
useAsyncData 和 useFetch 的使用区别
useAsyncData 主要用于页面级别的数据获取，它会在页面首次加载时执行一次，并缓存结果。这对于页面数据的初始化非常有用。
useFetch 类似于 useAsyncData，但是它更灵活，可以多次调用，并且不会缓存结果。这使得 useFetch 更适合处理用户交互时的数据请求。
注意点：
1. 不要在页面根元素使用 v-if 来控制显示，这样会导致服务端获取不到页面初始静态结构，可以在 onMounted 中执行对页面初始化的接口，后续的页面交互的数据请求可以在初始化完成后在 onNuxtReady 执行。如：
init1(),init2()为初始化函数，init3(),init4()页面交互函数
1、
onMounted(() => {Promise.all([init1(),init2()]).then(async () => {onNuxtReady(async()=>{await getPortListFunc();await initStation();await lineMove(0);})});
})
2、
Promise.all([init1(),init2()]).then(async () => {});
onNuxtReady(async()=>{await getPortListFunc();await initStation();await lineMove(0);
})
onNuxtReady是什么
onNuxtReady 是 Nuxt.js 提供的钩子函数，它允许开发者在 Nuxt.js 应用初始化完成后执行某些逻辑。这个钩子函数非常有用，因为它确保了所有 Nuxt.js 的初始化过程已经完成，包括服务器端渲染（SSR）、客户端的水合（hydration）等。
onNuxtReady 通常用于以下场景：
- 异步初始化：当你需要在应用初始化完成后执行某些异步操作，例如加载外部库、初始化地图或图表等。
- 确保 DOM 完全加载：确保所有的 DOM 元素都已经加载完毕，可以安全地访问这些元素。
- 动态加载库：动态地加载一些较大的库，避免阻塞页面的首次渲染。
onNuxtReady 可以放在需要调用初始化接口的组件中，这样可以避免控制台提示水合警告
callOnce是什么
callOnce 是一种设计模式或函数装饰器，它的作用是确保一个函数只被执行一次，无论被调用多少次都返回第一次的结果。
通常用于以下几种场景：
1.懒加载：在某些情况下，可能希望某个函数只在第一次被调用时执行，之后的调用直接返回之前的结果。例如，在模块初始化时只加载必要的资源。
2. 性能优化：对于那些执行成本较高或计算密集型的任务，callOnce 可以确保这些任务只运行一次，从而提高程序的整体性能。
3.单例模式：callOnce 可以作为一种简化版的单例模式实现方式，确保某个函数或方法在整个应用中只被调用一次。
资源管理：
在资源管理方面，callOnce 可以确保某些资源（如数据库连接、文件打开等）只被初始化一次。
NuxtLink 标签跳转问题
描述下场景：在路由组件中使用 NuxtLink 标签进行跳转，从首页’/’ 跳转去新页面会刷新新页面，但是从已跳转的页面再回到首页，发现页面路由虽然变化了，但是页面没有发生刷新，仍旧保持着上个页面的内容。
注意：NuxtLink默认就是使用Vue Router的pushState模式，它会在不刷新页面的前提下改变当前的视图。
解决方案：
- 检查无法正常打开的页面结构是否存在动态属性，做下非空判断再次尝试。
- 将 NuxtLink 标签替换成 a 标签 可触发跳转刷新。
- 检查是否使用了 keep-alive ，
静态文件的引用
- Nuxt服务启动后，static目录下的静态资源会被自动引入，可以直接引用static目录下的静态资源
<img src="/logo.png"/>
<img src="/logo.svg"/>
- assets 目录下的资源需要手动引入
<img src="~/assets/logo.png"/>
<img src="@/assets/logo.png"/>
Component emitted event “change” but it is neither declared in the emits option nor as an “onChange” prop
这里的警告是提示你，子组件内defineEmits内定义的函数名与父组件的接收函数名不同，或者你的写法错误了
解决方案：
子组件：const emit = defineEmits(["test1", "test2"]);
父组件：<test @test1="testFun1" @test2="testFun2">
未完结…
这篇关于【来来来，我看看是谁不点我】Nuxt3入坑记--JS版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
