小秀的博客

由于我项目中使用的是插件式的，但是这种引入默认是没有引入样式的，所以需要我们额外引入样式。

vue3+setup+ts项目问题报错：Cannot find module ‘xxx‘ or its corresponding type declarations.

我们在 main.ts 文件中引入其他vue文件的时候，是没有类型声明的，也就是说我们知道引入了一个vue文件，但是我们不知道这个文件是准备干嘛的。所以我们需要单独为这个加上一个类型的声明。如果说没有声明也没有报错的话，那可能是因为插件 Vue-Official 已经进行处理了。通常使用 defineComponent 函数来定义组件，并通过 export default 导出。

于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。如果想要在 viteconfig 里面使用环境变量（也就是在 nodejs 环境中使用环境变量），和在项目中有些不同。import.meta.env.BASE_URL 指的就是 vite.config.js 中的 base 配置。顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。

方式一：app.vue// 创建插件(在app.vue中创建全局可以使用 而在某个页面中创建只有该页面可以使用)// 方式一：})// vue 实例创建的时候 插件会被注册return {provide: {})插件注册顺序文件加数字（默认按照字符串形式比较，所以写成01）来确定，比如：01.prive.ts。

router.params 也可以获取动态参数 slug，为一个数组，比如上面的 [‘about’, ‘fdsf’, ‘fdsfs’, ‘fsdfsfsdf’, ‘…此时包含三个页面组件：/about, /about/about-fdsfsdf, /about/fdsf/fdsfs/fsdfsfsdf/…尽管它被称为“错误页面”，但它不是一个路由，不应该放在 ~/pages 目录中。具体 404 路由页面可以写成某个路径下的 404，也可以直接写在 pages 下，作为根目录的 404。

你可以在任何支持JavaScript的系统上部署这个输出，从 Node.js, less server, Workers, Edge-side 渲染或纯静态。但是，nuxt 在 package.json 中中并不能直接看到某些库（如 vue 、vue-router） 的版本号，这时我们可 使用 npm list 命令来查看项目中使用到库的版本，然后手动锁版本号。Nuxt3 支持 Vue3 及其周边生态，提供前后端功能，支持 CSR(SPA)，SSR，SSG 渲染模式的应用。全静态站点生成 - SSG。

先计算原本有没有图片，有则展示原图片的 url，没有则展示 icon点击上传组件从本地选取图片，单个图片上传可以控制选取后自动上传和之后手动上传当统一手动上传时，选择完图片之后将选择的图片file文件转换为URL地址进行前端页面的回显，并将其原本file格式的文件赋值给form表单内容对象，不修改头像默认使用原图片的 url将form表单内容对象转化为 FormData 的格式，并设置 FormData 请求头，作为参数传递给后端。

Proxy代理对象：Proxy是JavaScript中的一个内置对象，允许你创建一个代理对象来包装另一个对象，它们引用的是同一个原始对象（地址相同）。并且可以在代理对象上设置各种拦截器，以便捕获对原始对象的访问和操作。如果直接将一个新的值赋给代理对象，这将覆盖代理对象原来的值。这样做会破坏原有的响应式性质，因为代理对象的拦截器不会捕获直接赋值操作。对象里面的数据进行解构，解构后的引用类型仍然具有响应式，而解构后的变量不再具有响应式。是深层的，当里面有对象等（除了基础类型）都会继续代理。

核心流程是patch，然后Patch有一个分支，分别处理组件和浏览器原生标签。分别对应processElement和processComponent，从上到下插入，知道处理完成，才把顶层div插入到浏览器。“一次性渲染，而不是一个个一个渲染”

h 函数的原理就是 createVNode。可以使用 h 函数封装一些小组件。setup返回的render函数优先级高于template。

第三，React 为了解决更新的时候进行过多计算的问题引入了时间分片，但同时又带来了额外的计算开销，就是任务协调的计算，虽然 React 也使用最小堆等的算法进行优化，但相对 Vue 还是多了额外的性能开销，因为 Vue 没有时间分片，所以没有这方面的性能担忧。第一，首先时间分片是为了解决 CPU 进行大量计算的问题，因为 React 本身架构的问题，在默认的情况下更新会进行很多的计算，就算使用 React 提供的性能优化 API，进行设置，也会因为开发者本身的问题，依然可能存在过多计算的问题。

新的 VNode 依次替换掉旧的 VNode（重复的也要替换，浪费性能）新增删除前序算法比较结点（type：结点类型；key），相同则比较下一个，不相同则进行尾序对比前序对比算法后序对比算法（相当于头和头比较，尾和尾比较；不同于 Vue2 的双端 diff 算法还有头和尾，尾和头的交叉对比；因为 Vue3 用最长递增子序列算法进行了优化）新节点多出来就挂载旧节点多出来就卸载特殊情况乱序处理a. 构建新节点的映射关系（key: index）

从 React Hook 的实现角度看，React Hook 是根据 useState 调用的顺序来确定下一次重渲染时的 state 是来源于哪个 useState，所以出现了以下限制：而 Composition API 是基于 Vue 的响应式系统实现的，与 React Hook 的相比：

在调用render的时候，就会需要用到data的属性值，此时会触发getter函数，将当前的Watcher函数注册进sub里。在组件初始化时会给每一个data属性注册getter和setter，然后再new 一个自己的Watcher对象，此时watcher会立即调用组件的render函数去生成虚拟DOM。vue的响应式实现主要是利用了Object.defineProperty的方法里面的setter 与getter方法的观察者模式来实现。只有当读取到对象属性的时候才会进行遍历监听。

安装依赖: https://www.npmjs.com/package/vite-plugin-mock。注意不能使用 fetch，因为 Mockjs 底层使用的 是 xhr（axios）。在根目录创建mock文件夹:去创建我们需要mock数据与接口！然后在需要使用 mock 的组件中直接引入 mock文件。在 vite.config.js 配置文件启用插件。在mock文件夹内部创建一个user.ts文件。然后就可以实现假接口数据请求啦~最后通过axios测试接口。

当我们 commit 提交信息时，就不能再随意写了，必须是 git commit -m ‘fix: xxx’ 符合类型的才可以，对于我们的 commit 信息，也是有统一规范的，不能随便写，要让每个人都按照统一的标准来执行，我们可以利用。在生成的commit-msg文件中添加下面的命令。信息的时候，前面就需要带着下面的。中配置scripts命令。配置结束，现在当我们填写。

useTemplateRef 是对 ref 对 dom 获取或者组件实例的一个改动，以便区分使用 ref 获取响应式数据和 dom。

最终测试，除了普通长列表渲染，其他渲染都使得 10w 条数据渲染时间由 4s 变为 0.4 s。以下长列表渲染均通过代码示例进行讲解。虚拟列表库使用（Vue3版本）

Prettier 是一个流行的代码格式化工具，它支持多种语言，包括 JavaScript、TypeScript、CSS、SCSS、HTML、JSON、Vue、GraphQL、Markdown，甚至还有一些其他语言。Prettier 的目标是提供一个全面的、无需配置的代码格式化工具，以此来确保代码的一致性。它可以自动格式化你的代码，使你不需要花费时间去手动进行格式化。它可以在团队中保持一致的代码风格，这对于团队的协作非常有帮助。

只会将数据（state，getters，插件添加的状态）做转换响应式（proxy代理），不会对方法进行响应式。pinia 的解构不具有 响应式。因此为了解决这个问题，我们需要使用 storeToRefs。其中 persist 为持久化插件，刷新页面 store 数据不丢失。// 调用useXxxxxStore得到对应的store。中的数据，需要经过处理后再使用时，可以使用。第二种修改方式： $patch 批量修改。第三种修改方式： $store 直接覆盖。第一种修改方式，直接修改。第四种修改方式：借助。

computed是计算属性，它会根据响应式数据的变化⾃动计算出新的值，并，只有在计算属性所依赖的响应式数据发⽣改变时才会重新计算。computed适⽤于需要根据响应式数据计算得出结果的场景，例如根据商品的数量和单价计算商品的总价，或者根据选中的过滤条件过滤出数据列表。

以下方式只能在 setup / 生命周期钩子 里面使用。

实际项目中会将这两种方法合并，如果存在相同的，则 app.config.ts 文件的优先级更高。方法四：直接在 app.config.ts 中（defineAppConfig）配置。来获取，项目运行会自动读取该文件。这里的 appKey 变量值就会变为： ‘DDDDDD’。方法一：在 nuxt.config.ts 中进行配置。而且上述的配置字符串也支持动态替换(ref)。内置组件形式的 app 配置是三者里面最高的。可以使用 useAppConfig 获取。env 环境变量的优先级更高，如果使用。

pinia/nuxt会处理state 同步问题，比如不需要关心序列化或XSS攻击等问题。

此外 NuxtLayout 还有一个属性 name, 可以指定某个样式作为内部 NuxtPage 的布局，但是它的优先级要高于 definePageMeta.layout。这样所有页面都使用了 默认布局，slot 插槽里面内容是路由变化带来的。所以如果给上述加上 name，则 login 页面的自定义布局失效。下面，其他自定义的布局也在写在 layouts 目录下。然后默认的布局 需要 写在。

在页面中使用definePageMeta函数的 middleware 属性定义，可监听局部路由。Nuxt 提供了一个可定制的路由中间件，用来监听路由的导航，包括：局部和全局监听（支持再服务器和客户端执行）definePageMeta是一个编译器宏，可以用它为位于pages/目录中的页面组件设置元数据。我们也可以自定义 404 页面，只需在根目录下创建一个 error.vue 的组件即可。在middleware目录下定义，并会自动加载中间件。命名规范(kebab-case)优先级最高，支持两端。

【代码】【Nuxt】约定式路由和内置组件。

除了可以使用navigateTo，还支持 useRouter（用法相同） 进行编程式导航。通过 useRoute() 可以获取动态参数（route.params）。查询字符串参数通过 route.query 获取。

public 通常用于存放静态资源。assets 通常用于存放样式表、字体或者 svg 的资源。

以上的情况配置中导入了 css 文件和 scss 全局样式文件，在单个组件中导入了 全局变量文件。如果不在单个组件中导入 全局变量文件，也是可以在配置中导入的。

v-else-if 表示 v-if 的“else if 块”。v-if 用来控制元素的显示隐藏（切换真假DOM，直接注释掉表达式内容）v-show 用来控制元素的显示隐藏（display:none 的切换）v-else v-if条件收尾语句。v- 开头都是 vue 的指令。// 定义变量和方法。

服务器端渲染全称是：Server Side Render，在服务器端渲染页面，并将渲染好HTML返回给浏览器呈现。SSR应用的页面是在服务端渲染的，用户每请求一个SSR页面都会先在服务端进行渲染，然后将渲染好的页面，返回给浏览器呈现。构建SSR应用常见的库和框架有：Vue Nuxt, React Next.js等，SSR应用也称同构应用。

用户登录后，服务端返回一个权限树(用树形结构呈现权限数据)，然后我们去解析这个树形结构，得到我们需要的路由表(动态路由对象)，本质上就是一个由路由对象为元素的数组。然后通过 vue 中的动态路由，也就是 addRoutes，动态的添加路由。最后根据路由去渲染多级菜单栏。服务端返回的权限树中包含了指定页面下指定按钮的数据，可以通过 v-if 或者 disable 来控制按钮权限。

MVC : view 视图层依靠 model 来进行更新渲染，当数据发生改变时。第一步: 通知 controller 进行更新，然后第二步 controller 再通知 model 进行更新。最后 model 才将 view 更新 , 这样大量的逻辑以及更新操作，都需要在controller 操作,则产生了大量代码，不利于维护，且 model 发生变更时很难判断是由 model 直接更改的，还是view用户操作更改的，这样使得数据流很混乱，且相互依赖耦合度高。

index.tshash实现hash是URL中hash()及后面的那部分，常用作描点在页面内进行导航，改变URL中的hash部分不会引起页面刷新通过hashchange事件监听URL的变化，改变URL的方式只有这几种：index.tshistory实现Vue Router 的 history 模式使用的是 HTML5 的 History API，例如 和 ，来改变 URL 而无需重新加载页面。history提供类似hashchange事件的popstate事件，但popstate事件有些不同：所以

/ // 这里需要改变 this 的指向，否则获取不到 $data。

/ // 这里需要改变 this 的指向，否则获取不到 $data。

/ // 这里需要改变 this 的指向，否则获取不到 $data。

/ // 这里需要改变 this 的指向，否则获取不到 $data。