mez_Blog的博客

因为要用到这样一个场景，需要下载系统的使用教程，所以在前端项目中就提供了一个能够下载系统教程的一个按钮，供使用者进行下载。所以就试着写一下这个功能，以一个demo的形式进行演示，在学习的过程中也发现了中文路径的严重问题！！！！！！！！！！！！首先描述一下接下来展示的代码的效果：就是在界面上又对应的文本和下载对应文件的按钮，这里因为是1.0版本，就不对实现这个功能做成函数进行封装了，如果有时间的话还可以封装成一个函数，通过传参来下载指定的文件。

FileReader只能访问用户明确选择的文件内容，这些文件要么是通过HTML元素选择的，要么是通过拖放操作选择的，它不能用来通过路径名从用户的文件系统中读取文件。FileReader.readAsText（）：开始读取指定Blob内容，一旦完成，result属性将包含文件的内容作为文本字符串，可以指定一个可选的编码名称。FileReader.result：文件的内容，这个属性仅仅在读取操作完成后生效，并且数据的格式取决于用于启动读取操作的方法。方法来读取文件内容。

简单来说，其实就是如果你要使用的是可以枚举的，像[1,2,3]或{a:1,b:2,c:3}这样的可视的数组或对象，那两者替换没有什么问题，如果要是出现迭代器对象，还有ES6+后新增的Map，Set这些，就要仔细斟酌一下两者的区别，来进行使用。代码的意识为：定义了一个isSubset函数，该函数的返回值为传入的参数2调用every函数的结果，在every函数内，同样传入了一个回调函数，该回调函数的返回值为，传入的参数1是否包含参数2中的所有元素。当你想要避免遍历原型链上的属性时，

slice方法：返回从start到end（不包括end）索引范围内的数组部分的浅拷贝，形成一个新的数组对象。不改变原数组slice方法不会修改调用它的数组，而是返回一个新的数组。支持负索引start和end参数可以是负数，表示从数组末尾开始计算索引。浅拷贝：返回的新数组是原数组的浅拷贝，即只复制一层深度的对象引用。concat方法：用于合并两个或多个数组。不改变原数组concat方法不会修改调用它的数组，而是返回一个新的数组。可以合并多个数组。

插槽是vue中的一个非常强大且灵活的功能，在写组件时，可以为组件的使用者预留一些可以自定义内容的占位符。通过插槽，可以极大提高组件的客服用和灵活性。插槽大体可以分为三类：默认插槽，具名插槽和作用域插槽。下面将一一介绍。

上面所设置的属性值，就是下面enter-active和leave-active类名的前缀，如果在使用transition标签时没有设置名称，那么就会使用默认的类名前缀v，完整类名就是v-enter-active,v-leave-active。可能有人说为什么要这样设置，那是因为底层vue就已经写好了，就是需要这样进行命名，一个是进入-激活的样式，另一个是离开-激活的样式，这里的命名是固定的，前面的前缀可以通过name属性的形式进行修改。当然了，对应的类名不止这两个，暂时列举出来vue官网中对应的所有类名。

就是支持HTML5语法（部分展示用的语法，并不是所有），前端人员的福音，我们可以直接在里面写HTML5代码就可以实现功能，比如上面的图片太大，我们可以利用img标签进行样式的设置。这里解释一下:的意思，如果单独在左侧一个:号，就是默认的文本左对齐，如果两侧都有:号，就是文本居中对齐，同理，右侧一个:号，就是文本右对齐。可以选中文本在这里直接设置，后面也有快捷键，也可以使用其语法，一个#，对应一级标题，两个#，对应二级标题，等。其他的上面说到的地方，都可以使用HTML5语法实现，就不再一一展示。

【代码】Vue2指令原理手写。

Vue 2 的混入（Mixin）是一种在 Vue 组件中分发可复用功能的方式。通过混入，你可以将一些通用的组件选项（如数据、方法、计算属性、生命周期钩子等）提取到一个混入对象中，并在多个组件中重用这些选项，从而实现代码复用和组织。

在做公司的老项目时，第一件事就是对应的将代码拷过来的时候出现的环境的问题。一般来说，就是拷过来的代码不能直接用，把对应的node_modules文件夹删除，然后直接npm i进行安装对应的库和插件即可。但是，由于是老项目，所以用到的库和现在电脑上的node版本不一样，所以就导致执行命令npm i的时候报错。

然后我们可能会有疑问，既然爷爷可以向孙组件传递数据，那么孙可不可以修改爷爷的数据呢，其实，原理和当时的props是一样的，这种方式虽然不能直接修改爷爷的值，但是可以让爷爷再传递一个方法给孙组件，然后孙组件调用这个方法，完成对爷爷的修改。这样我们就可以看到对应的x和y也被传递过来了，然后我们的关注重点是祖孙传值，而不是父子传值，所以这个brother组件就是一个桥梁，其作用就是不使用父组件的值，直接将父组件传递的值使用$attrs直接传递给孙组件。来到界面，我们点击按钮，就可以修改爷爷的数据。

还有就是那个update:aaa中的update，这里使用update是vue框架官方的写法，如果想要叫其他值，就还需要父组件传递对应的事件@custom-update:myValue="someData = $event"，过程也比较繁琐，这里只是说明为什么那里要叫update。在实际的开发中还是使用这种固定命名的比较便于开发。其中，有几个需要注意的地方，就是使用defineProps()时，注意区分v-model的值和父子传值的属性。这样就完成了自定以组件的双向绑定。注意和之前的父组件内容进行对比。

在开发项目时，需要使用@符号来代替书写./和../等麻烦的路径书写，所以就遇到了下面的问题。

当然了，同步和异步的方法都可以直接写在仓库中，因为pinia中没有mutation，所以一个action中可以书写同步和异步的方法，大大简化了状态更新流程。就是在定义大仓库导出大仓库之前进行插件定义，然后使用pinia实例进行使用该插件，就相当于默认给pinia添加了一些属性和方法，这样，无论是哪个Store，都可以直接使用这些插件。这样就建立了一个空的仓库 ，然后我们还需要定义一个Store，在Vuex中对应的state，getter，action中，都会在Store中进行定义。

接上篇下面的属性就对应着回调函数，下面就一一进行介绍。因为element-plus在封装upload组件时就自带了一个预览和删除的图标，只是没有方法实现，这里进行指明。就是在图片墙列表中，自动就带了这两个图标和遮罩，下面的属性也与其相关。

在学习项目时，多次用到element-plus中的图片上传组件，这里就详细介绍一下，方便以后的学习和记忆。一般在使用第三方的组件时，我们进行查看文档时，虽然官方提供了一些案例，但是有些属性和方法等不可能一一用实例展示出来，下面就对该组件存在的属性和方法等进行一一展示。

意思就是如果你自己定义了一个局部变量BGcolor，就是你可以使用自己定义的样式，如果没有改局部变量，那么当你使用这个样式时，默认就是红色。【通俗的将，你自己有，就用你自己的，你若是没有，就用我的】sass的注释和普通css的注释也是不一样的，类似于js的注释，我们直接在vscode中使用快捷键ctrl+/就可以自定生成sass的注释。使用@import导入规则，它在生成css文件是就把相关文件导入进来，在导入sass时，不需要指定导入文件的全名，就是可以省略后缀。可以看到，对应5的样式已经设置上去了。

这时候会有一个认证，需要验证你的gitee用户名和密码，输入正确就可以，要是输入错误下一次还是走这个错误的认证，需要在本机去删除那个认证标识，具体方法可以度娘。然后我们将自己创建的文件copy到这个初始化的文件夹中就行，默认刚才哪些代码就生成了一个MD文件，其他啥都没有。该命令中，路径就是自己创建的json文件路径，端口也可以自定义，不要写默认其他服务的保留端口即可。在项目中，一般都放在store文件夹中，对应的模块放入modules文件夹里，对应的目录结构如下。以counterStore举例。

比如：docker pull nginx 下载 nginx镜像【等价于docker pull nginx:latest也就是默认下载最新版的镜像，如果想要下载指定版本的镜像，可以去dockerhub下载，网址：https://hub.docker.com】和docker start功能相反，就是停掉容器，但是用法相同，后面后面可以跟上容器的ID，或者是容器的names。如果直接使用rm不加参数，只能删除停止的容器，如果加上参数-f，就是强制删除容器，无论停止与否。

回到React双向绑定这里，就是在输入框输入值，然后在React调试工具中也可以看到对象的状态的值，相反，在调试工具中修改里面的值，对应输入框的值也会对应的进行修改。这个东西和vue调试工具一样，都需要去重谷歌商店中下载，不过懂的都懂，需要科学上网。classnames是一个简单的JS库，可以非常方便的通过条件动态控制class类名的显示。这时最好重启一下谷歌浏览器，否则对应的调试工具的components选项可能不会出来。这里使用了box3和box2的动态类名，我们来到对应的样式文件。

①对于正数而言，原码、反码、补码是相同的②对于负数，原码，反码（为首位表示正负的1不变，剩下的0和1互换），补码（为反码加1）

本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着发生变化（数据驱动视图），可以类比与vue中的响应式。这里的e就是一个类似原生的事件e，并不是真正的原生事件e,如果要使用原生事件e，需要使用 e.nativeEvent。在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可。概念：一个组件就是用户界面的一部分，他可以有自己的逻辑和外观，组件之间可以相互嵌套，也可以复用多次。在css文件中定义样式，然后在引入使用。

c:/Users/10834/Desktop/0716_project/vite_Ts_Project/src/views/screen/index.vue”隐式拥有 "any" 类型。服气，就是这样的一个小问题，一开始自己的解决访问直接使用的@ts-ignore这样直接忽略了ts类型检查。这个路由信息是一个ts文件，而引入的vue文件没有设置lang="ts"，这就解释了为什么有的模块不报错，就个别引入模块报错。看看，回答的模糊其词，我的tsconfig.json文件几乎为空，没有进行配置。

在使用vite创建react时，有一个语言选项，就是typescript-SWC，这里介绍一下SWC。SWC：可扩展的Rust的平台，用于下一代快速开发工具，SWC比Babel快20倍。简单来说，就是用于格式转换的，比Babel要快，所以在选择语言时，选择带SWC的就行，结构和不带SWC的一样。在创建的项目的入口文件中。

因为npm库上的包都会实时更新，比如以前的包名都有可能出现改变，比如以前叫particles-vue3，而目前叫做npm i @tsparticles/vue3,使用该命令进行安装，并且还出现了其他包的依赖，否则不能正常显示粒子效果，一个是import { loadFull } from 'tsparticles'，另一个是import {loadSlim} from 'tsparticles-slim'，这两个选择一个即可，对应着不同的粒子效果。问题4：在使用npm的粒子库时，没有出现预期的效果。

important>行内样式，当然了，上面的，a，b，c，也肯定不如它，一旦给某一个元素样式中书写了!important，就以它的样式为准！看【元素、伪元素】的个数，谁多就是谁的优先级高，如果个数还是相同，就遵循后来者居上原则（就是谁最后写就按照谁的样式）。首先，一旦出现行内样式，不管你上面的a,b,c的个数有多少个，都以行内样式为准，除非行内样式有的没有设置。当第一位a的数量相同时，比如都有1个选择器，那么就看下一位b的个数【类，伪类，属性】，其中b表示：一个选择器中【类，伪类，属性】选择器的个数。

接口可以再定义类的时候去限制类的结构,接口中的所有属性都不能有实际的值，所以说，接口只考虑对象的接口，而不考虑其值，在接口中所有的方法都是抽象方法。接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当做类型声明去使用。interface和abstract是TS中独有的，在编译后就看不到了。参数-w，就是对app.ts进行监视，每次该文件改变时就会自动编译。console.log('大家好~~')定义类时，可以使类去实现一个接口。注意：接口是可以重复声明的。

let c:{name:string,[abc:string]:any},其中abc可以随意起名，该类型声明表示c中只要包含name属性，其他的属性有或无都随意。他与any的区别是不能随意赋值，如果把一个unknown类型的值赋值给别的值，就会报错，而any不会报错，并且将自己的类型赋值给被赋值的那个变量。void：常用于设置函数返回值，如果没有指定函数的返回值类型，会自动被认为返回值的类型为void。any:表示任意类型，一个变量设置为此类型后，相当于关闭了TS类型检测。

在Vue.js项目中，Vuex通常被用作状态管理库，尤其是在大型或复杂的应用中，它提供了一种集中管理所有组件共享状态的方式。对于兄弟组件之间的通信，Vuex可以作为一个很好的解决方案，因为它允许状态被全局访问和修改。

写一个按钮，当我们点击按钮的时候，就可以看到arrTest2返回的值，我们可以看到多了一个true，因为在执行every后，this.testEvery=true，对应页面的testEvery值也会进行显示。然后解释一下，这里首先使用filter方法将满足选中状态的商品进行过滤，返回的是一个数组，然后再将返回的数组使用累加方法reduce进行金额的计算。解释一下，第一个参数就是传递过来的值，是加1，还是加-1，第二个值就是对应的索引，因为要对对应的商品进行数量加减操作，所以需要对应商品的索引。

所以，简而言之，在实际的开发中，上面的数组列表一般是后端返回出来的数据，我们需要使用v-for将这些数据进行渲染，但是在使用v-for的时候也必须要加key，并且key的取值要有唯一性，一般都是数据的ID，比如学生列表的学生ID，或商品列表中的商品ID。3.如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；4.使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性，实际项目中如果没有id，推荐使用index）

computed：是计算属性，依赖其他属性值，并且computed的值有缓存，当依赖的属性值发生改变时，才会重新计算computed的值，默认是只读的（相当于getter函数），它也可以设置getter和setter函数来完成读和写。（1）、造成数据混乱：如：一个父级组件的数据传递给多个子组件，某个子组件如果通过Props修改父组件的数据，父级组件再修改其他子组件，其他子组件就会莫名其妙的被修改，造成数据混乱。watch：属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数。

不能说成就吧，对于程序员的一天，不是在改bug的路上，还是在改bug的路上，改掉一个个的bug就是我最大的成就。提示：你过去写得最好的一段代码是什么？提示：希望未来能够不忘初心，一步步走向更好的子集。提示：当前创作和你的工作、学习是什么样的关系。提示：可以和大家分享最初成为创作者的初心。提示：在创作的过程中都有哪些收获。

在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过vm访问组件实例进行赋值等操作，（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）简单理解：导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等细小的过程，在每一个过程中都有一个函数，这个函数能让你操作一些其他的事的时机，比如跳转前是否验证登录，这就是导航守卫。常用于发送网络请求。

Plugin就是插件，基于事件流框架Tapable，插件可以扩展Webpack的功能，在Webpack运行的声明周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。在以上过程中，Webpack会特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。③如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；

返回值：父节点，这里必是一个元素节点，因为文本节点或其他节点不可能当父节点，就和父元素节点有一点不同，当多次调用父节点的时候，顶级父节点是document，而父元素节点的顶级节点是document，而父元素节点的顶级节点的顶级元素节点是HTML。作用：获取某一节点下所有的子一级节点（也就是说子集节点里面嵌套的节点获取不到其标签，但是可以获取到内容，与父节点一起展示）返回值：也是一个节点（下一个兄弟节点），注意节点和元素节点的区别，这里还是节点，包括空白字符形成的文本节点。

i++){ var item=arr[i] // item 就是数组内的每一个数据 //把item当做key添加到对象内 obj[item]='随便数据'} //准备一个新的数组 var newArr=[] //循环遍历对象 for( var k in obj){// 把每一个 k添加到 newArr里面 newArr.push(k-0)}（21）arr.findIndex(function(item,index,arr){return})过滤数组，将满足条件的第一个数据的索引返回。

与解析的重名情况：（1）变量名与变量名重名（以第一个定义的变量名为准，后面定义的无意义）（2）函数名与函数名重名（后面定义的函数名会覆盖前面的函数名，也就是以后面的函数名为准）（3）变量名与函数名重名（以函数名为准）js的数据类型可以分为两种：一种是基本数据类型（数字，字符串，undefined，null，布尔），另一种是复杂数据类型（函数，对象，数组，日期对象，Set，Map等）在书写递归函数时，一般由以下内容构成：初始化，自增，执行代码，条件判断，不然就是一个没有尽头的递归函数，我们叫做死递归。

然后我们使用db.createCollection("users")创建一个名为users的集合，这里就比较恶心了，这里的集合就是我们以前学的关系型数据库中的表，对应关系就是table对应collection。这里就体现了非关系型数据库的自由了，一开始我们使用的name,age字段并不是唯一的，再向里面插入数据的时候就可以随意改变字段名，以及字段的个数。选择好点击download下载即可。还是刚才社区版安装的界面，下面有一个tools，点击即可，出现右边的安装界面，同样选择配置信息进行下载安装。

箭头函数并不是万能的，一旦遇到function传统写法就直接使用箭头函数替换，在传统的时间绑定中，还是需要使用function的写法，而不要使用箭头函数，否则，一旦出现了箭头函数的嵌套，就会出现问题，特别是this指向，外层的this指向为window，里层的this指向外层的this，还是window，就会出现问题。箭头函数无法访问arguments，无法new。2.rest参数，剩余参数。箭头函数没有this。this指向父作用域。