.Vue的解析

.vue 文件是 Vue.js 框架使用的单文件组件（Single File Component，SFC）格式，它允许开发者将模板、脚本和样式封装在一个文件中。.vue 文件通常包含 HTML、JavaScript 和 CSS 代码，但它们需要被转换成浏览器可以识别的 JavaScript 和 CSS 代码。在 Vue 项目中，.vue 文件的转换工作通常由以下几种工具或插件完成：

Vue CLI：Vue CLI 是 Vue.js 官方提供的项目脚手架工具，它可以帮助开发者快速搭建 Vue 项目。Vue CLI 内部集成了 webpack，并使用 vue-loader 来处理 .vue 文件的转换。
Vite：Vite 是一种新型的前端构建工具，它在开发环境下利用浏览器的原生 ES 模块能力来提供快速的模块热更新（HMR）。Vite 使用 @vitejs/plugin-vue 插件来处理 .vue 文件。
Webpack：Webpack 是一个模块打包器（module bundler），它可以将项目中的各种资源打包成浏览器可以识别的格式。在使用 Vue.js 时，Webpack 通过 vue-loader 来处理 .vue 文件。
Rollup：Rollup 是一个 ES 模块打包器，它在 Vite 的生产构建中被用来打包代码。虽然 Rollup 本身不直接处理 .vue 文件，但它可以通过插件（如 @rollup/plugin-vue）来支持 Vue.js。
Parcel：Parcel 是另一个零配置的前端构建工具，它也可以处理 .vue 文件，但通常需要配合相应的插件。

在这些工具中，vue-loader 或类似的加载器会解析 .vue 文件，将其中的 HTML 部分转换成 JavaScript 渲染函数，CSS 部分提取出来并转换为相应的样式资源，JavaScript 部分则进行编译和打包。最终，这些资源会被打包成浏览器可以识别和执行的 JavaScript 和 CSS 文件。例如，在 Vite 中，.vue 文件的处理流程大致如下：

解析：@vitejs/plugin-vue 插件解析 .vue 文件，将模板、脚本和样式分离。
转换：模板部分通过 vue/compiler-sfc 转换为 JavaScript 渲染函数；CSS 部分通过 css-loader 或类似工具转换为 CSS 代码。
打包：转换后的 JavaScript 和 CSS 代码被 Vite 打包成最终的静态资源。

这样，当浏览器请求这些资源时，它们已经是可以直接解析和执行的格式了。

vite

Vite 是一种新型的前端构建工具，它能够显著提升前端开发体验。Vite 的主要特点包括：

极速的服务启动：Vite 的开发服务器利用浏览器的原生 ES 模块能力，提供了快速的模块热更新（HMR），使得开发服务器的启动和热更新都非常迅速。
丰富的功能：Vite 对 TypeScript、JSX、CSS 等现代前端技术提供开箱即用的支持，并且具有优化的构建过程。
优化的构建：在生产环境中，Vite 使用 Rollup 进行代码打包，提供预配置的构建指令，以输出高度优化的静态资源。
通用的插件接口：Vite 提供了一个插件系统，允许开发者扩展其功能。
完全类型化的 API：Vite 提供了完整的 TypeScript 支持，使得开发者可以享受到类型安全和 IDE 的良好支持。

Vite 的核心优势在于它在开发环境下的快速响应和生产环境下的高效打包。它通过利用浏览器的原生 ESM 能力，避免了传统打包器在开发环境中的复杂打包过程，从而实现了快速的服务器启动和热更新。此外，Vite 在生产环境中使用 Rollup 进行打包，确保了代码的优化和最小化。Vite 的设计理念是提供开箱即用的配置，同时保持高度的可扩展性。它支持多种前端框架，如 Vue、React、Preact、Svelte 等，并且可以通过插件系统进一步扩展其功能。Vite 的出现，为前端开发带来了更快速、更高效的体验。Vite 适用于现代前端项目的开发，特别是那些追求开发速度和构建效率的项目。它通过简化构建流程和优化资源加载，帮助开发者提升生产力。如果你正在寻找一个能够提供快速开发体验和高效生产构建的前端工具，Vite 是一个值得考虑的选择。

Vue3 Hooks实现原理及组件的生命周期

什么是Hook？

在JavaScript中，Hook是一种能够拦截和修改函数或方法行为的技术。通过使用Hook，开发者可以在现有的函数执行前、执行后或者替换函数的实现逻辑。这种灵活的能力使得开发者能够定制和扩展现有代码的行为，而无需修改原始代码。优点：1、解耦合和可维护性：使用Hook技术，开发者可以将定制和扩展的逻辑与原始代码解耦合。这种解耦合使得代码更易于维护，因为修改或扩展的逻辑可以在独立的Hook函数中进行管理。
2、代码复用：通过将定制和扩展的逻辑封装在Hook函数中，开发者可以在多个地方重复使用相同的Hook函数，从而实现代码复用，减少重复编写相似逻辑的工作量。
3、快速原型开发：使用Hook技术，开发者可以迅速修改现有代码的行为，以便进行快速原型开发和实验。这种能力可以帮助开发者更快地迭代和验证想法。缺点：1、学习曲线较陡峭，需要熟悉新的编程模式和思维方式。2、对于小型项目或简单组件，使用Hooks可能过于复杂。3、在Vue生态中，第三方Hooks的质量和兼容性可能存在差异。

Vue3 Hooks实现原理

在Vue3中，Hooks是基于Composition API实现的，它允许我们在组件的逻辑代码中更好地组织和复用代码。Hooks本质上是一组可复用的函数，它们可以“钩入”Vue组件的生命周期，让我们能够在组件的不同生命周期阶段执行特定的逻辑。Vue3中的Hooks是通过setup函数来使用的，setup函数是Vue3组件中的一个新的生命周期函数，它在组件实例被创建之前调用，并且接收两个参数：props和context。在setup函数中，我们可以定义和返回组件中需要使用的响应式数据、方法、计算属性等，而这些都可以通过Hooks来实现。优点：

提高了代码的复用性和可维护性。
使组件的逻辑更加清晰、易于理解。
更好地管理组件的副作用操作。

组件生命周期

//beforeCreate created  setup语法糖模式是没有这个这两个生命周期的 setup去代替了
//调用顺序
console.log(setup)
//创建钩子
onBeforeMount(()=>{
    console.log("创建之前==========>")
})

onMounted(()=>{
    console.log("创建完成==========>")
})
//更新的钩子
onBeforeUpdate(()=>{
   console.log("组件更新之前==========>") 
})

onUpdated(()=>{
   console.log("组件更新完成==========>") 
})
//销毁钩子
onBeforeUnmount(()=>{
   console.log("销毁之前==========>") 	
})

Unmounted(()=>{
	console.log("销毁完成==========>")
})

什么是热更新

所谓的热更新（本文中将其与热加载等同），就是运行时更新代码和资源。在主动热更新过程中，客户端向服务器发送请求询问是否有更新，若服务器告知客户端没有更新，就直接进入下一流程。但如果是告知有更新，那就会进入更新流程。按照约定下载指定的文件进行客户端内容的替换和更新。热更新也可以做成被动的，直接约定由服务器发送的某条消息触发热更流程。

为什么要热更

这里说的热更，包括开发时热更新以及产品发布后的热更新。快速版本迭代。
减少用户手动更新 app 次数。
及时修复 bug。通过热更新及时将应用更新到最新版，快速让补丁生效，不必等到用户手动下载新版。
运行时修复 bug。对于服务器来说可以不停机完成 bug 修复和更新，提高用户使用体验。
开发时热更新可以减少等待代码生效的时间。对于大型项目来说，修改代码后的编译/启动时间经常会很长，此时使用开发时热更新可以大大提高开发效率。

对于移动App来说，只要产品还在生命周期以内，就不可避免会面临版本升级的问题。产品运营能力的提升，都是靠APP版本更新迭代，早期对于热更新的需求动机主要就是为了解决新版本升级时的升级率和版本收敛速度的问题，随着需求的不断发展，如今热更新被视为整个产品精细化运营的基础，实现版本迭代的灰度发布、AB测试、各种精细化更新。

前端 - Vite 热更新(HMR)原理了解一下 - 个人文章 - SegmentFault 思否

Web API

Window.localStorage

只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意，和 js 对象相比，键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).常用方法

1
2
3

localStorage.setItem("myCat", "Tom");
let cat = localStorage.getItem("myCat");
localStorage.removeItem("myCat");

本地存储 — localStorage 和 sessionStorage 详解

ocalStorage 和 sessionStorage 是 HTML5 提供的两种常用本地存储方式，它们使开发者能够在浏览器中持久化存储数据，而无需依赖服务器端。

一、本地存储概述

什么是本地存储？
本地存储（Local Storage）是指在用户浏览器中存储数据的方式，它允许 Web 应用程序将少量数据保存在用户设备上，方便页面之间、甚至关闭浏览器后的数据持久化。这种存储方式与传统的 Cookie 相比，有以下显著优点：存储容量大：相比 Cookie 的 4KB 限制，localStorage 和 sessionStorage 可以存储大约 5MB 的数据（具体大小因浏览器不同略有差异）。
不会随着 HTTP 请求发送：与 Cookie 不同，本地存储的数据不会在每次请求时发送到服务器，从而减少了带宽的消耗。
基于键值对存储：通过简单的键值对形式来存储和访问数据，使用方便。

二、localStorage 与 sessionStorage 的区别

尽管 localStorage 和 sessionStorage 都属于 Web Storage API，它们在存储数据的生命周期上有显著区别：localStorage：数据的持久化程度高，即使用户关闭浏览器后，数据依然会被保留。除非显式删除，数据可以一直存在，适用于持久保存用户偏好设置、用户认证信息等需要长时间保存的数据。
sessionStorage：数据仅在浏览器的会话期间有效。一旦关闭页面或标签页，数据就会被清除，适用于存储临时性的数据，如表单状态、页面之间的传递数据等。

三、localStorage 的用法

localStorage 提供了简单易用的 API 来存储和访问数据。下面介绍一些常见的方法。

存储数据
使用 localStorage.setItem(key, value) 方法将数据存储到 localStorage 中：

// 存储一个用户名

1	localStorage.setItem('username', 'Alice');

读取数据
使用 localStorage.getItem(key) 方法可以获取存储在 localStorage 中的数据：

1
2
3

// 读取存储的用户名
const username = localStorage.getItem('username');
console.log(username);  // 输出：Alice

删除数据
可以通过 localStorage.removeItem(key) 方法来删除指定的存储数据：
1
2
// 删除存储的用户名
localStorage.removeItem('username');
清空所有数据
如果需要清除 localStorage 中的所有数据，可以使用 localStorage.clear() 方法：
1
2
// 清空所有 localStorage 数据
localStorage.clear();
更新数据
localStorage 中的值是可以覆盖更新的，只需要再次调用 setItem 方法即可：
1
2
// 更新用户名为 Bob
localStorage.setItem('username', 'Bob');

存储对象和数组
localStorage 只能存储字符串，如果需要存储对象或数组，可以将它们序列化为 JSON 格式：

// 存储一个对象
const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));

// 读取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name);  // 输出：Alice

四、sessionStorage 的用法

sessionStorage 的 API 与 localStorage 基本相同，唯一的区别在于其数据存储的生命周期。

存储数据

1 2	// 存储一个 session 数据 sessionStorage.setItem('sessionData', 'This is session data');

读取数据

1
2
3

// 读取 session 数据
const sessionData = sessionStorage.getItem('sessionData');
console.log(sessionData);  // 输出：This is session data

删除数据

1 2	// 删除指定 session 数据 sessionStorage.removeItem('sessionData');

清空所有 session 数据
1
2
// 清空所有 session 数据
sessionStorage.clear();
五、localStorage 和 sessionStorage 的区别详解
数据的持久性
localStorage：持久化存储，数据不会因关闭浏览器而丢失。
sessionStorage：会话存储，数据仅在当前会话有效，关闭浏览器或标签页后数据会被清除。
应用场景
localStorage 的应用场景：
用户偏好设置：如主题颜色、语言设置等。
用户身份信息：保存用户登录状态以便后续访问无需重新登录。
长期数据保存：保存一些用户操作数据或浏览历史，以便下次访问时继续使用。
sessionStorage 的应用场景：
临时数据存储：表单数据的暂存、用户填写进度的保存等。
页面跳转数据传递：在多页应用中，页面之间传递数据但不希望数据持久化。
一次性设置：例如购买流程中保存用户选择的产品信息，用户关闭页面后清空。
安全性与隐私
虽然 localStorage 和 sessionStorage 提供了方便的数据存储方式，但它们的安全性较为有限，因为这些数据对于任何具有 JavaScript 执行权限的页面都可以访问。因此，在使用这两种存储方式时，尤其是 localStorage，需要注意以下几点：
敏感数据的存储：不要在 localStorage 或 sessionStorage 中存储敏感的用户数据（如密码、支付信息等），因为这些数据可以被恶意脚本轻易获取。
数据加密：如果必须存储敏感信息，确保对数据进行加密，并在传输和存储过程中保持高安全标准。

六、localStorage 与 Cookies 的对比

在 Web 开发中，localStorage 和 Cookies 都可以用于存储数据，但它们的应用场景和特性存在一些区别：

存储大小
localStorage：约 5MB（不同浏览器有差异）。
Cookies：约 4KB。
数据传输
localStorage：不会随每次 HTTP 请求发送，因此不会影响页面的加载性能。
Cookies：会随每次 HTTP 请求发送，可能增加带宽占用，影响页面加载速度。
生命周期
localStorage：持久存储，数据不会随浏览器关闭而清除，除非用户手动删除。
Cookies：可以设置到期时间，适合存储一些需要定期自动清除的数据。
六、注意事项与最佳实践
不要滥用本地存储
虽然 localStorage 和 sessionStorage 非常方便，但不应滥用它们。例如，存储过多的数据可能会导致性能问题，同时也可能存在跨站脚本攻击（XSS）的风险。
定期清理数据
开发者应考虑定期清理过期或无用的数据，以避免本地存储空间被不必要的数据占满，影响用户体验。
使用加密机制
如果需要存储用户的敏感信息，建议使用加密机制对数据进行保护。同时，使用 HTTPS 确保数据在传输过程中不被窃取。

ocalStorage 和 sessionStorage 是现代 Web 开发中非常实用的两种浏览器存储技术。通过了解它们的区别和应用场景，开发者可以在实际项目中合理使用这些存储技术，提升用户体验。需要特别注意的是，尽管它们提供了方便的数据存储方式，但在存储敏感信息时，必须考虑安全性和隐私保护。

步骤

<header>的search模块:
1. 返回按钮：编写返回主页面路由函数goHome()
2. 搜索按钮：路由到ProductList页面（toFix：点击搜索框加大）
<footer>navbar：

import公共组件Navbar ，创建标签按钮的路由跳转函数toHotgoods

商品页面：

i. 创建
热门商品和推荐商品
的盒子导入的css有问题热门商品div 与搜索div重叠、搜索出的物品无法点击

解决： margin-top: 50px

ii. 数据导入：通过getHome函数异步获取返回的数据

iii. 数据渲染：v-for

iv. 商品详情页的跳转：gotoDetail()路由跳转

改进：

热门商品按钮点击悬停效果

客服页面：i. 返回按钮失效没有setup进入生命周期？

ii. 如何返回上一级详情页面？

轮换页面控制

问题：
服务器关闭，页面缓存在哪，还能对页面信息的浏览？reactive定义的数组对象中没定义的数组能直接在onMounted中赋值？
1
stat.recommends = data.recommendGoodses
骨架屏占位：loading值已经被修改还是占位原因：没加: 导致数据不能变化
useRoute 和 useRouter 区别

useRoute 主要用于获取当前路由的信息，适用于静态展示当前路由信息的场景。

useRouter 主要用于获取路由实例，适用于需要进行动态路由操作的场景，比如跳转到新的路由。
在一些场景中，我们可能需要同时使用这两个函数，例如在获取当前路由信息的同时，需要进行一些动态的路由操作。

插槽
https://cloud.tencent.com/developer/article/2061478