m0_48799309的博客

原创 数组去重实用方法

array是要比较的数组，iteratee是一个可选的函数，用于确定元素的唯一性。如果不提供该函数，将使用默认的。这个方法的缺点是数组中不能有复杂数据类型，因为set里做的是严格等，地址不同也会判不等。3.手写，效率肯定不如lodash优化过的，面试可用。1.lodash库的uniqBy方法。函数，即直接比较元素的值。

原创 vue项目前端加密库

原创 在前端项目中，后台传来的数据文本中有大量空格，前端拿来显示在页面中空格会被压缩，不能全部显示怎么办？

原创 async和await讲解

原创 下载文件前端代码

这样，当用户点击按钮时，会将当前页面的内容作为文件下载下来。你可以根据需求调整文件类型和默认文件名。2 . 在Vue组件的script中，定义一个方法来处理下载文件的逻辑。

原创 ES6引入块级作用域解决了什么问题？

循环中的变量共享问题：在使用var声明的变量作为循环变量时，循环体内新的作用域会覆盖外部作用域的同名变量，导致不符合预期的结果。使用let声明的变量则会在每次循环时创建一个新的作用域，保证每次循环中变量的独立性。变量声明提升：在传统的作用域中，使用var声明的变量会存在变量提升，即在作用域内任何位置都可以访问到该变量。而块级作用域中使用let声明的变量则不存在变量提升，只在块级作用域内有效。闭包问题：在传统作用域中，使用var声明的变量会存在变量提升和函数作用域的特性，可能导致闭包中变量值的共享和泄露。

原创 diff算法源码分析

原创 vue2的＜keep-alive＞组件源码分析

如果我们的name 不在include或者在exclude当中，代表不缓存，直接返回拿到的虚拟dom vnode。再从最右侧去push进去这个keys数组，保证最近使用的缓存的vnode的key永远处于数组的右侧。准备两个容器，一个对象，一个数组，对象当中后期存的就是我们缓存的组件对象，数组当中存的是缓存的组件对象的key。3、先拿到created当中创建两个容器，接下来拿vnode的key，如果有就直接拿，没有去添加。如果有，那么就构建要缓存的组件vnode，进行真正的缓存。

原创 vue的nextTick源码分析

原创 路由跳转的过程

路由跳转不是直接就跳了，一共分三步，看下图。

原创 vue组件注册

原创 vue数据代理和劫持

因为数据劫持是在beforeCreate和created之间做的，一旦结束就不会再触发，所以后面再添加或删除的数据就不再是响应式的了，vue提供了this.$set和this.$delete去解决这个问题，用这两个方法添加和删除的数据还是响应式。当读取vm身上的数据时，会通过get方法返回data中的同名属性，此时又会调用data的同名属性的get方法，最后返回同名属性值。vue希望数据是响应式的，页面和数据本身有联系。只能监听到读取和修改，不能监听添加和删除。

原创 包装对象和对象转基本值

不是判等，要把数组转成基本数据类型，[1,2,3].valueOf拿不到原始值，返回的还是[1,2,3]，[1,2,3].toString的结果是"1,2,3"，"1,2,3"+100就变成了字符串拼接，最后的结果是" 1,2,3100 "valueOf返回自身的非包装对象，再去调用toString，不同的对象有自己的toString，所以返回的结果也不同。那就调用对象的valueOf方法，valueOf方法的本意是去拿包装对象的原始值，如果不是包装对象，那就会返回自身。是不是懵啦 来看看叭。

原创 Vite创建项目之后配置@为src目录

有三个选择：写项目文件名，选项目框架，ts+vue3或者js+vue2或者自定义，自定义会直接安装eslint和pretirrer，其他的没有需要自己装。到这里@已经可以代表src目录的绝对路径了，但写的时候没提示，所以还需要在tsconfig.json里配置一下。到这里 就可以在文件中愉快的使用 import " @/xxx/xxx "vite创建项目是 npm create vite。在compilerOptions中配置。这里选了ts+vue3。

原创 vue2和vue3在路由上的一些写法区别

vue3对应的vue-router4版本中，删除了上面的matcher属性，所以要手动删除。// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下。一定要放在路由最后面，不然会被任意路由匹配到，后面的路由就不起作用了。这样做的目的是将原始的路由实例重置为新的路由实例，以达到重置路由的目的。( [ xxx ] ) 这个方法可以直接把数组中的路由对象全部动态添加到路由中。路由数组.forEach(item=>router.属性赋值为新的路由实例的。

原创 权限控制（RBAC）

上面这段代码中给函数传参的时候用了lodash的cloneDeep方法，因为如果不这样做的话，函数在对子路由进行校验的时候会直接修改源数据，这样allAsyncRoutes异步路由就直接被修改了，切换用户的时候菜单显示会出现问题。4.所以现在的目的就是：拿到动态路由在用户信息的路由权限数组中筛选，留下有权限的， 把最后筛选完成的路由对象动态添加到路由中。RBAC：基于角色的权限控制，用户+角色+权限，给角色分配权限，给用户分配角色。都可以，主要看用户的动态路由在哪生成。

原创 js的三种暴露方式

注意：不管什么暴露方式，暴露出来的都是对象。

原创 封装axios

后面再细说。

原创 快速清除组件数据

有时候在不刷新页面的情况下 , 同一个组件再次出现时还会保留上一次填写的数值 , 需要在功能最后手动清除。总之，这段代码是用于重置组件数据的方法，将当前数据对象恢复为初始状态。这段代码是一个JavaScript方法，名为。对象重置为组件实例的初始数据。

原创 Eslint 和 prettier

自身的规范倾向于个人 / 团队的代码风格的规范或统一，例如单引号还是双引号，每行最大长度，等号左右空格，使用 tab 还是 空格等等，将。// 执行 eslint 检测的时间，onType 输入时。// // 一行的字符数，如果超过会进行换行，默认为80。// // 尾随逗号问题，设置为none 不显示 逗号。// // 默认使用prittier作为格式化工具。//指定 eslint 所处理的文件的后缀。VsCode 插件安装两个插件。一起协同工作犹如如虎添翼。// // 不要有分号。

原创 vue3使用iconfont

得到压缩包解压放到项目中，一般都放到assets文件夹下。

原创 npm遇到冲突报错

-legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。在新版本的npm中，默认情况下，npm install遇到冲突的peerDependencies时将失败。--force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。使用--force或--legacy-peer-deps可解决这种情况。建议用--legacy-peer-deps 比较保险一点。

原创 vue3的子标签样式不生效问题

这时候里面的样式只能加给根标签，子标签想用的时候需要用 :deep()进行样式穿透。解决：因为vue3的样式部分可能有scoped属性。描述：子标签样式不生效。

原创 菜单权限和按钮权限

原创 nextTick

原创 添加请求头数据时的config未定义

要给config添加一个token，显示headers可能未定义。因为headers是一个可选项，所以在上面加一个短路运算符。

原创 vue3封装axios

封装一个成熟的axios，预先对响应结果和错误进行处理，方便后续使用。

原创 配置环境变量

在开发中，由于不同的运行环境需要配置不同的接口地址，每次切换都需要在axios封装文件中的baseURL中进行配置，比较麻烦，如果忘记切换可能会导致用户看到垃圾数据。所以为了更加方便的应对环境切换，可以利用vite提供的环境变量和模式功能，定制各种开发环境，应对开发环境的一些公共环境变量的配置。1.首先在根目录下，添加这四个环境变量设置文件，分别对应开发环境、生产环境、预发布环境、测试环境（这个test和上面一样，只是图标库识别的问题）3.然后在package.json中配置不同环境对应的运行模式。

原创 三斜线代码说明

原创 Vue3(ts)写todolist

2.List中用defineprops接收到数据，循环item组件，并把每条数据传给item，由 item进行展示。1.在list中给接收到的数据进行类型约束，放在本文件中就会报错，放在别的文件中 进行引入就不会有问题。②第二个功能可以使用自定义事件，App中给Footer创建自定义事件，接收一个done值参 数，遍历数据全修改为传过来的done值。

原创 【Vue3】组合式函数

名字的由来：一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。组合式函数是指利用组合式API封装和复用携带状态的逻辑的函数（感觉有点像mixin，因为它会携带状态）描述：将一个图片接口封装成一个组合式函数，调用时需要提供地址和方式两种参数，获取到地址、响应状态和错误信息这三个数据。说白了：函数内部定义数据，内部处理出数据处理的逻辑，返回数据。②有状态逻辑函数：负责管理会随时间而变化的状态。

原创 【Vue3】 ref 和 reactive梳理

功能：ref可以创建响应式状态，可以创建简单数据类型，也可以创建复杂数据类型。（ref也可以用来获取真实dom对象，放后面说，这里主要说创建响应式的事）②正如上面说的，ref对象的.value 内才是真正的值，而且这个值是响应式的，可以通过ref对象.value的形式获取或者修改。④ref也可以创建响应式对象，ref会把这个对象通过reactive去转化为深层响应式对象然后赋给自己的value。①reactive也是一个函数，接收一个对象，返回一个对象的响应式代理（proxy对象）

原创 组件间数据传递总结

功能：可以实现子传父思路：父组件在子组件标签上添加一个自定义事件，给这个自定义事件赋一个自己的回调函数，用来处理传过来的数据-- 向 VueComponents 身上添加一个自定义的方法 -->子组件通过某些事件触发这个自定义事件，自定义事件必须通过$emit触发methods: {

原创 vee-validate表单验证（自定义验证规则）

① v-validate="{required:true,phone:true}"或者v-validate="'required|phone'" 里的required和phone都是上面写过的规则。这里的文件设计思路是：把自定义的部分作为一个单独的文件（src\utils\validate.js）去整理，需要的正则是另一个文件（src\utils\reg.js）3.在你需要使用的文件中做基础配置（src\utils\validate.js）1.首先要在main.js中导入，以确保你能在这个项目中使用它。

原创 京东商城商品数量正则判断(Vue2)

1.首先绑定输入框的value值，首先想到的是v-model,但是v-model是实时绑定，没办法在中间判断正则，所以只能通过v-bind单项绑定，再通过@change触发一个失焦后的函数，在函数中进行判断。eg：第一次填写数据200，第二次填写数据201，201进入大于200的判断，这时计算出来的 num还是200，视图不变化，所以显示的还是201。【注意】这里需要考虑如果两次计算得出的num相同，不会触发视图的自动渲染，所以要手动强制渲染。① 是一个1-200的整数。

原创 props接收的参数赋值给当前组件的状态，这个状态不可用

props异步执行，在created数据劫持和代理时，props的数据还没有拿到，所以【b】中的值是undefined，标签中使用的时候使用的是undefined，所以页面不显示。子组件props接收到一个值【a】，把【a】赋值给data中的一个状态【b】，拿这个状态【b】在标签中直接使用，页面中不显示。解决方案：可以watch监听props然后赋值给data（如果是图片会有一瞬间的图片加载失败提示），也可以使用或语法，把props初始渲染作为默认值直接写入模板，不再经过data。

原创 vuex的mapState和mapActions方法

概念：mapActions 获取 actions 中的方法，并将其映射为当前组件的 methods。概念：mapState 读取store 仓库中的数据，并将其映射为当前组件的计算属性。我记得有点啥使用场景的区别来着，忘了，等再遇到了再写。

原创 splice slice split在js中的用法举例

为什么要写呢？因为我是个笨比老是记不住啊哈哈哈哈。