油墨香^-^的博客

大小、请求数、加载时间都大大减少注意优化后的时间chunk-vendors.js和app.js加载一共耗时1.59s，不是1.11+1.59,chunk-vendors的下载解析会阻塞app.js的下载解析，所以一共1.59s。前：image.png。

同时，通过与日志系统的集成和对异步操作的有效管理，你可以更全面地掌握应用的运行状况并快速定位和修复问题。在现代前端应用中，异步操作随处可见。在 Vue 3 中，你可以使用 `try...catch` 语句以及 `async`/`await` 语法来捕获异步操作中的错误。在这个示例中，所有发生在 Vue 组件内的未捕获错误都会由 `app.config.errorHandler` 处理器捕获。在这里，我们通过 `fetch` API 进行一个网络请求，并在 `try...catch` 语句中捕获可能的错误。

Vue提供了`v-once`指令，允许你一次性地渲染数据，不再进行后续变化监听。对于那些不需要重复更新的静态内容，使用`v-once`可以显著减少渲染和更新过程的性能消耗。对于那些需要频繁更新的动画或滚动事件，使用`requestAnimationFrame`可以优化性能。它通过只渲染可见区域的数据条目，大幅减少了DOM元素的数量，从而提高渲染性能。尽量拆分复杂的计算属性和模板渲染逻辑，避免单一属性和函数承担过多渲染任务，提升代码的可读性和执行效率。## 2. 使用 `v-once` 指令。

这篇文章讲了在vue3中如何从服务端加载远程组件，首先我们需要使用方法定义一个异步组件，这个异步组件是可以直接在template中像普通组件一样使用。但是由于接收的组件必须是编译后的vue组件对象，而我们从服务端拿到的远程组件就是一个普通的vue文件，所以这时我们引入了包。包的作用就是在运行时将一个vue文件编译成vue组件对象，这样我们就可以实现从服务端加载远程组件了。

Vue提供了`v-once`指令，允许你一次性地渲染数据，不再进行后续变化监听。对于那些不需要重复更新的静态内容，使用`v-once`可以显著减少渲染和更新过程的性能消耗。对于那些需要频繁更新的动画或滚动事件，使用`requestAnimationFrame`可以优化性能。它确保在屏幕刷新之前执行回调函数，从而提高渲染效率。它通过只渲染可见区域的数据条目，大幅减少了DOM元素的数量，从而提高渲染性能。尽量拆分复杂的计算属性和模板渲染逻辑，避免单一属性和函数承担过多渲染任务，提升代码的可读性和执行效率。

只会改变最终渲染的 DOM 结构，它不会对 Vue 组件树的层级结构产生影响，父子组件之间的属性传递和事件触发保持不变。逻辑上，这个弹框受子组件的状态控制，隶属于子组件。但在 DOM 树结构中，它应该超越子组件，最好是。属性设定转移的目的地，它可以是 CSS 选择器字符串，也可以是真正的 DOM 节点。有时候需要根据某些条件，动态启用或禁用 Teleport，使用它的。一个常见的业务场景：在某个子组件中，点击按钮，出现一个全局弹框。的直接子元素，否则它很容易受到子组件样式的影响。组件加载到 DOM 之前，

Nuxt 是一个开源的服务端渲染（SSR）框架，建立在 Vue.js 之上，专注于提供一套完整的前端开发解决方案，旨在帮助开发者构建高性能、可扩展的Web应用。Pinia 是一个专为 Vue.js 设计的新一代状态管理库，它提供了更简单、更灵活的 API，并且完全支持 Vue 3。Axios是一个基于Promise的网络请求库，它可以在Node.js和浏览器中运行，它提供了一种简单而直观的方式来发送各种HTTP请求，如GET、POST、PUT、DELETE等，并且易于对请求和响应进行拦截处理。

Vue 3 中的组件也能实现同样的魔法效果，它会把组件内的模板片段传送到遥远的其他位置。

本期文章主要介绍了路由这个概念，以及重点讲前端实现路由的两种模式，哈希刚好就是浏览器承认他，接了哈希值改变url不会引起页面的刷新，然后通过得知哈希值；history就是有个方法，可以改变url不引起页面刷新的pushState，通过得知url，这个模式下前进回退需要通过popState事件来触发。❝本次学习代码已上传至GitHub学习仓库：(https://github.com/DolphinFeng/CodeSpace)

1.首先需要在管理员模式下打开cmd2.找到需要编译的dist/static/js的目录下 执行完成后在该目录会看到目录下存在下面的文件名：0.7ab7d1434ffcc747c1ca.js.map，这里以0.7ab7d1434ffcc747c1ca.js.map为例，如下图:3.全局安装reverse-sourcemap资源npm install --global reverse-sourcemap4.反编译 执行：reverse-sourcemap --output-dir source。

在 Vue 3 中,组件之间的通信是构建应用程序的关键。本指南将介绍 13 种不同的组件通信方法,从最简单到最复杂,帮助你选择最适合你需求的方式。

作为前端开发者，我们不仅致力于创造视觉吸引且交互性强的应用界面，还必须将应用安全放在首位。跨站脚本攻击（XSS）是网络安全的重大威胁之一，它允许攻击者将恶意脚本注入到我们的应用中，这可能导致用户数据被盗、用户被重定向到诈骗网站，甚至我们的用户界面遭到破坏。

（1）对于自定义组件内部的文案的多语言化信息，写在组件的标签中即可。同时，为了避免不同的自定义组件中多语言字段的命名冲突，在每个字段的名字前面加上以组件名-式的前缀。（2）对于页面的标题、一些错误提示等文案，它们是出现在组件之外的，因此不适合写在组件的标签中，所以我们单独新建一个global.yml来存放这些全局性的多语言信息。这些内容直接写在global.yml中即可，并且，为了表面与其它的语言包字段相冲突，我们在每个字段的前面加上global-前缀。

从构建到打包，Vue 项目经历了初始化、开发、编译、打包和优化等多个步骤。这些步骤通过 Vue CLI、webpack、Babel 等工具协同工作，最终生成可以在生产环境中部署的高性能、优化的静态资源文件。入口配置：定义应用程序的入口文件（通常是模块解析：通过解析入口文件及其依赖，构建模块依赖图。加载器和插件：使用各种加载器和插件处理不同类型的文件。代码打包：将所有模块打包成一个或多个 bundle 文件。优化：对生成的代码进行各种优化，如代码分割、压缩和缓存优化。输出。

生产环境中Vue项目我们一般会部署在域名的子目录下，在了解如何部署时我们先了解下Vue构建相关的基础知识。Vue CLI目前已经处于维护状态，一般老项目可能还在用它来开发，Vue CLI打包时基于。，如果想在Nginx中指定前缀访问静态资源和文件，需要在打包构建时配置。中进行修改，指定base配置即可，这里我们指定了。目录下找名为hwc的目录，以及该目录下的文件.目前是Vu3主流构建工具，打包配置我们可以在。，也就是说所有的静态资源都会带上该前缀。在Nginx配置中，我们加了一项。

最后就可以在页面使用 element 组件啦~至此一个完整的 vue3+vite+ts 项目就搭建完成了，还有待完善，包括 vite 配置还有很多优化的地方，易用性组件等，等下期一起整理哦。node 版本>=12.0.0，这边建议直接更新到 16+（我本地的是最新的 v20.11.1）文件，复制以下代码，测试一下路由跳转。,版本错误的话无法使用路由进行跳转。此时可以在 src 目录下新建一个。路由配置成功，页面跳转成功。：在.vue 文件增加。：vue3 最好安装。

props: {

本期文章主要介绍了路由这个概念，以及重点讲前端实现路由的两种模式，哈希刚好就是浏览器承认他，接了哈希值改变url不会引起页面的刷新，然后通过得知哈希值；history就是有个方法，可以改变url不引起页面刷新的pushState，通过得知url，这个模式下前进回退需要通过popState事件来触发。❝本次学习代码已上传至GitHub学习仓库：(https://github.com/DolphinFeng/CodeSpace)

对于一些请求，接口返回的数据总有相同的字段，比如下面这种请求分页返回的data总会有current、page、records、searchCount、size、total等几个字段，但是records里面的字段可能就要具体情况具体定义。

在大型应用中，建议使用模块系统（ES6 modules，CommonJS）管理你的代码。举个例子： 下面是一段随机生成二级域名的代码,先随机取出一个主域名，然后再根据主域名随机生成4个二级域名，存储在浏览器缓存中，并且设置过期时间。但是问题是，每次我们修改这个配置的时候，都要重新编译一遍项目。中的全局脚本和 Vue 组件文件的模块作用域是隔离的。文件中，并在 Vue 页面中使用，你需要将该脚本写入。标签内，同时，将结果放在全局对象上，例如。然后，在 Vue 组件中，你可以通过。

这里只说Vue2的bind：指令绑定到指定元素时调用，只调用一次inserted：指定元素插入父节点时调用update：所在组件的 VNode 更新时调用：所在组件以及其子组件 VNode 全部更新后调用unbind：只调用一次，指令与元素解绑时调用props: {num: {// 返回值为false则验证不通过，报错return [== -1model: {

在开发大型前端项目时，往往是一个需求对应一个分支，当完成需求后，就需要将代码打包、部署。代码通常需要部署到多个环境中，这些环境包括：日常环境、测试环境、回归环境和生产环境。回归环境用于在发布前进行测试，生产环境是用户访问的版本。随着时间的推移，项目中会不断引入许多新的依赖（如第三方库、插件等）和图片资源，代码数量也会逐渐增多，从而导致构建项目更加耗时，这也意味着部署项目需要消耗更长的时间。我负责的项目构建需要 66 秒，有时将代码部署到日常环境后，还需要临时修改重新部署；

若是深度定制可以通过在shape创建的时候配置shape属性实现，在开始添加内置属性之前，我们先来了解下shape在bpmn-js中直接创建的场景，以及内置属性创建的具体格式。两种方式均可实现内置属性节点的配置插入，第一种方式通过适配式的方式实现，尽可能少的影响建模其的独立性和完整性，后一种方式比较直接，一次性完成创建配置，减少shape的绘制次数，但代码侵入性较高，不利于不同场景的适配共用。具体可根据需求选择使用何种方式进行实现。

答案v-model可以看成是方法的语法糖（组件）。原生的v-model，会根据标签的不同生成不同的事件与属性。解析一个指令来。自定义：自己写model属性，里面放上prop和event答案避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例，如果data是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过data函数返回一个对象作为组件的状态。

而在Vue Router 3中，则是直接在组件实例中使用this.$router来获取路由实例，并使用this.$route来获取路由对象。而在Vue Router 3中，则是在组件的实例方法中使用this.$router来获取路由实例，并使用this.$route来获取路由对象。：在Vue Router 4中，使用createWebHistory或createWebHashHistory来定义路由模式，而在Vue Router 3中，则是通过在路由实例中设置mode属性来定义。

注意：按需引入时element-plus不需要在main.ts中引入，插件会自动挂载处理，可以在全局直接使用。源码地址：https://github.com/cwjbjy/vite-vue-ts-seed。rules更多配置：https://eslint.org/docs/latest/rules/vite：使用 new URL(url, import.meta.url).href 处理。node版本不足16的，使用 yarn test 启动命令，读取.env 与 .env.test的内容。

无论是面试过程还是日常业务开发，相信大多数前端开发者可以熟练使用 Async/Await 作为异步任务的终极处理方案。但是对于 Async 函数的具体实现过程只是知其然不知所以然，仅仅了解它是基于 Promise 和 Generator 生成器函数的语法糖。提及 JavaScript 中 Async 函数的内部实现原理，大多数开发者并不清楚这一过程。甚至从来没有思考过 Async 所谓语法糖是如何被 JavaScript 组合而来的。

在大型应用中，可以将不同模块的组件定义为异步组件，根据用户访问的模块来按需加载相应的组件。通过将路由组件定义为异步组件，可以根据路由的动态变化来按需加载组件，提高路由切换的响应速度。：对于一些较大的组件，例如包含大量代码或资源的组件，可以将其定义为异步组件，以避免在应用初始化时一次性加载过多的代码。：在应用中同时使用异步组件和同步组件时，由于异步组件的动态加载特性，可能会导致组件加载的顺序问题。：对于异步组件，可以使用 webpack 的代码分割功能来拆分和按需加载组件，以进一步优化应用的性能。

6、注册完之后就可以直接使用了，回到想要生成pdf的页面，如点击提交按钮需要生成pdf，我们就可以在提交方法中调用getpdf这个方法。2、在你想要生成pdf的元素上添加一个id，如下所示我添加了一个 id = pdfDom。3、在项目公共方法中创建i个生成pdf的方法，如在目录utils下创建一个pdf.js。问题：最近项目有个需求，将前端页面生成PDF。reportName：生成pdf的标题。1、首先生成报告页面，也就是常规页面。4、然后就是写一个生成pdf的方法。dom：想要生成pdf的元素。

以上的案例是mustache最简单的使用，下面来额外介绍一些常用的使用场景。首先来熟悉一下mustache的语法，下面来介绍一些场景来使用这些语法{{key}}{{.}}{{&key}}上面只教大家实现一个最最简单的脚手架。其功能就只有一个模板文件生成。虽然简单，但是这些都是脚手架的入门功，代码已经上传到 GitHub ( https://github.com/532pyh/mortal-cli )，大家可以下载下来，自己实践一下，光看不练永远学不会。

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过方式注册全局指令。然后在入口文件中进行Vue.use()调用。

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法，正如你看到的那样，无论是代码行数，还是代码的精简度， 的方式是最简单的形式。如果你对 Vue 很熟悉，那么，我推荐你使用 的方式。这种写法，让 Vue3 成了我最喜欢的前端框架。如果你还是前端新人，那么，我推荐你先学习第一种写法。

具体配置在webpack.base.conf.js里面的rules里面的 url-loader，这样做的好处:在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。所以keep-alive一般缓存都是一些列表页,不会有太多的操作,更多的只是结果集的更换..给路由的组件meta增加一个标志位,结合v-if就可以按需加上缓存了!可以的,SSR(服务端渲染就能满足你的需求),因为请求回来就是一个处理完毕的 html，现在 vue 的服务端开发框架有这么个比较流行,如下Nuxt.js。

这些规范允许子组件影响父组件的状态...... 下面的官方文档还指出，最好的做法是避免此类更改，除非设计在父子之间紧密耦合，因为这使得以后很难确定数据流。传递，则子组件无法直接修改父组件传递的对象或数组的属性。但是，如果对象或数组属性发生更改，Vue3 将检测到更改并更新父组件的数据。作为子组件传递时，无法更改对象或数组本身，但可以更改对象或数组的嵌套属性。是单值的，因此子组件中的更改将被视为与局部变量的更改相同。定义为计算为新数组和新对象的值。值将不会反映父组件中的更改。也将始终引用新的数组和新的对象。

Vue开发技巧

像手机淘宝网，就是在根标签设置font-size，然后使用rem去设置尺寸大小，它们可能有更精细化的优化处理，这里就只讲普通的实现方法。所以，很多人寻求各种解决方案，我们现在的很多移动端框架都是支持了的，包括小程序，很多都采用了rpx的方式，这里不去深究它们的实现方案。导致我们的布局在某些小屏或者大屏上与UI的表现并不一致。随着现在互联网设备的日益更新，各大尺寸的屏幕参差不穷。

通过Suspense组件，我们可以在异步组件加载时显示一个占位符，提供更好的用户体验，并且在异步组件加载失败时进行错误处理，避免影响其他部分的页面渲染。总结：teleport是Vue 3中的一个特性，它允许我们在组件中创建传送门，将组件内容渲染到DOM中的任意位置，这在处理弹出式窗口、模态框等场景时非常有用。teleport的作用是在组件中创建一个包含内容的"传送门"，将这个内容渲染到DOM中的另一个位置，通常是在组件的外部。这样可以在应用的任何位置使用这个组件，并通过teleport指定要渲染的位置。

在Vue 3.0中，Composition API是一种新的API风格，它与之前的Options API相比提供了更灵活和强大的方式来组织组件的逻辑代码。Composition API旨在解决Options API在大型复杂组件中逻辑难以维护的问题，同时也提高了代码的可复用性。在Vue 2.x中，使用Options API是定义组件的主要方式。

在Vue中，异步组件是一种特殊类型的组件，其加载和渲染是异步完成的。它的原理是通过动态导入组件，只有在组件需要使用时才进行加载，而不是在应用初始化时立即加载所有组件。这样可以减少初始加载时间，优化应用的性能。异步组件的原理和使用方法如下：原理：在Vue中，当解析到组件标签时，会触发组件的加载。对于异步组件，Vue使用动态导入（Dynamic Import）的方式，通过import()函数来异步加载组件的定义。

TypeScript支持： Vue 3的源码是使用TypeScript编写的，这意味着你可以直接在TypeScript项目中使用Vue 3，并获得静态类型检查的好处。声明Props和Ref类型： 在Vue 3中，你可以使用 defineProps 和 defineEmits 函数来声明组件的Props和事件类型，这可以让TypeScript检查这些属性和事件的类型是否与定义一致。v-model的参数： 在Vue 3中，你可以为 v-model 提供一个参数，用于将数据绑定到组件的指定属性。