2022年3月遇到的知识点总结

1.Vuex在vue3中用于持久化存储exportdefault{namespaced:true,state:{info:{a:1}},mutations:{updateA(state,val){state.info.a=val},},actions:{asyncUpdate(store,val){setTimeout(()=>{store.commit('updateA',val)},2000)}},getters:{format(state){returnstate.info.a}}}注意：变异方法接收2个参数，第一个是当前状态，第二个是要修改的值。一个持久化存储的插件：vuex-persistedstate自动将vuex数据存储到localStorage中，并在页面刷新时自动获取localStorage中的数据赋值给vuex。参考链接：参考链接2、chrome浏览器无法在本地手动设置cookies：cookie项背景颜色变为红色，刷新后无法保存。解决方法：访问地址chrome://flags/，搜索Partitionedcookies，将设置项改为Enabled，重启浏览器。3、字符串零填充x.padStart(2,'0')第一个参数表示填充后生成的字符串的长度，第二个参数表示填充到字符串中的内容。4.src目录外的静态文件无法导入到react项目中。错误消息：找不到模块：您试图导入...，它位于项目src/目录之外。不支持src/之外的相对导入。解决方案：禁用ModuleScopePlugin插件//craco.config.jsconstCracoLessPlugin=require('craco-less');constModuleScopePlugin=require('react-dev-utils/ModuleScopePlugin');module.exports={plugins:[{plugin:{overrideWebpackConfig:({webpackConfig,cracoConfig,pluginOptions,context:{env,paths}})=>{webpackConfig.resolve.plugins=webpackConfig.resolve.plugins.filter(p=>p.constructor.name!=='ModuleScopePlugin');返回网络包配置；},},},]}5.a标签下载文件如果href和js文件地址不是同源的，download属性不会生效。如果引用第三方网站或者前后端分离的项目，调用后台的接口，这时候下载是不行的。文件名为中文，下载不生效怎么解决？使用js创建链接，以blob形式下载文件6.尾调用优化尾调用：一个函数的最后一步是调用另一个函数。尾调用优化：只保留内部函数的调用记录。如果所有的函数都是tailcalls，每次执行只能有一条调用记录，这样会大大节省内存。目前各大浏览器对es6各种特性的支持中，只有“tailcalloptimization”支持程度较低，只有Safari支持，其他浏览器不支持。7.当函数参数为对象时，解构赋值为对象的每个属性设置一个默认值：functionfn({x=1,y=2}={}){}为整个对象设置一个默认值:functionfn({x,y}={x=1,y=2}){}8.tsv-model的值是对象属性的嵌套形式constval={radius:'',side:'',}consttype=['circle':{tip:'circle',model:'radius'},'rect':{tip:'square',model:'side'}]{{item.tip}}上面的代码在ts中会报类型错误，解决方法：声明类型需要说明模型接口的类型Test{radius:string,side:string,}consttype:Array<{tip:string,model:keyofTest,}>=['circle':{tip:'circle',model:'radius'},'rect':{tip:'square',model:'side'}]keyof是一个索引类型的查询操作符。假设T是一个类型，那么keyofT生成的类型就是T的属性名的字符串字面量类型组成的联合类型。特别说明：T是数据类型，不是数据本身。9.解构赋值的作用首先是交换变量的值；[x,y]=[y,x]第二种是从函数返回多个值；let{x,y}=fn()第三种，函数参数的定义；functionfn({x=0,y=0}={}){}fn({y:1,x:2})fn({x:1})fn()第四个，提取json数据；let{id,name}=jsonData第五个，函数参数的默认值；functionfn(x=1){}六、遍历map结构；for(let[key,value]ofmap){}for(let[key]ofmap){}for(let[,value]ofmap){}七、输入模块的指定方法；const{fn1}=require('xx')import{fn2}from'yy'10.使用csssize-adjust和unicode-range改变任意文字大小100元@font-face{font-family:smallYuan;src:local('平安SC'),local("微软雅黑");尺寸调整：20%；unicode-range:U+5143;}.price{字体系列:smallYuan;字体大小：24px；color:red;}size-adjust属性用于@font-face自定义字体时指定字体大小，值只能是百分比。Firefox不支持它。unicode-range可以指定哪些字符应用这个自定义字体，支持任意数量的字符，也支持字符范围。size-adjust的核心竞争力在于不需要使用html标签来包裹需要调整大小的字符。size-adjust其他功能：突破浏览器最小字号限制12px；当值为0%时，字符被隐藏，但爬虫无法识别；11、复制谷歌浏览器收藏夹和收藏夹相关文件所在目录：系统盘-用户-自己的用户名-AppData-Local-Google-UserData-Default。Bookmarks和Bookmark.bak是收藏夹的具体内容。将书签的后缀改为.txt，可以直接打开查看收藏的内容。