摘要：
一.webpack介绍 webpack是一个前端模块化工具,简单解释:webpack就是处理多个文件,根据设置的规则,对文件进行合并和修改. 正式说:webpack是一个模块化打包工具.从入口模块出发,识别源码中的模块化导入语句,递归的找出入口模块的所有依赖,将入口和所有依赖打包 我们把合并后的文件 阅读全文
摘要：
前言 在开发大数据监控时,主要的技术栈时echarts+vue,因为echarts在生成每一个图表的时候,都会执行一些公共方法(初始化,resize等),使用全局混入的方法，可以被任意子组件调用到 mixin全局混入 mixin文件 新建一个mixin/echartMixin.js文件,内部值如下 阅读全文
摘要：
问题 在vue项目中使用了iframe,iframe和vue页面交互使用了postMessage,如下代码,发现一个bug,重新进入这个页面,1就会多打印,次数和进入页面的次数相同 //iframe window.parent.postMessage({ info:2 }) //di.vue mou 阅读全文
摘要：
问题 echarts饼图添加了一个点击事件,点击一次,发现事件function却执行多次,并且会越来越多 myCharts.on(‘click',function(params){}) 解决 在前方通过off解绑 myCharts.off('click'); myCharts.on(‘click', 阅读全文
摘要：
前言 setTimeout表示只执行一次,setTimeout通过递归可以模拟setInterval,并且有很多setInterval不具备的好处,下面会详细讲解 setInterval表示间隔一段时间就执行一次 setTimeout 模拟setInterval代码分析:第一次执行diHander后 阅读全文
摘要：
//事件队列const eventList={}//封装监听 const $on=function(eventName,callback){ if(!enentList[eventName]){ enentList[eventName]=[]; } enentList[eventName].push 阅读全文
摘要：
父传子 第一种方法 通过自定义属性 //父组件 <template> <div id="app"> <HelloWorld msg='你好di'></HelloWorld> </div> </template> //子组件 <template> <div> {{msg}} </div> </temp 阅读全文
摘要：
前言 Hot Module Replacement（以下简称 HMR）是 我们经常使用的热更新模块,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新. 比如我们修改div的样式,修 阅读全文
摘要：
1.使用webpcak-bundle-analyzer去对项目进行模块分析,生成一个报告report,根据报告针对性优化,更找出大模块和不需要打包的模块 运行npm run build --report,结果如下,我们找到不要打包的模块删除 2.对于较大的模块,我们可以在webpcak中配置exte 阅读全文
摘要：
1,@babel/parser将es6的代码转化为AST 2,@bebel/core将es6的AST转化为es5的AST,并将es5的AST转化为对应的es5代码.该过程中可能还需要@babel/traverse 来获取依赖文件 阅读全文
摘要：
前言 在vuex中我们使用v-model来修改vuex.state中的数据,没有经过mutation函数.在严格模式中会抛出错误 解决 第一种方法是将v-model拆分成:value+@input,并且要在mutation中定义input的函数,比较麻烦 <input v-model="obj.me 阅读全文
摘要：
[]==[]//false 原因:==在比较两侧的数据时,两侧数据类型相等时,就去比较值,由于[]是引用类型,指向的地址明显不同,所以为false []==![]//true !优先级比==大,所以先计算![]=>false.这时就是比较[]==false,对于数组和数值的比较,规则是将数组转化为数 阅读全文
摘要：
场景 computed:适用于一个多个数据影响一个数据 watch:适用于一个数据影响多个数据 功能 computed是计算属性用于计算,返回计算后的值 watch是侦听器用于监听一个数据变化执行相应的回调函数 使用 computed函数内部要有return返回值 watch函数有新旧两个值的参数, 阅读全文
摘要：
前言 路由钩子函数有3个参数 to:表示路由要去哪里(是一个对象类型) from:表示路由从哪里来(是一个对象类型) next:next()执行管道中的下一个钩子;next(false)中断导航,浏览器的地址会重置到from地址;next({path:"/'})跳转到path路径对应的地址,该方法在 阅读全文
摘要：
渲染 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 从外到内,在从内到外 子组件更新 父beforeUpdate->子beforeUpdate->子up 阅读全文
摘要：
前言 在带宽不够的情况下,我们可以通过让图片按需加载,来实现性能上的优化 知识点 getBoundingClientRect 用于返回元素的大小和相对于视窗的位置。 window.innerHeight 用户获取文档显示区域的高度,包括滚动条 document.documentElement.cli 阅读全文
摘要：
前言 客户端向服务端发起通信,会经过DNS解析查找,本文主要讲的就是关于DNS解析查找的优化 DNS解析流程 查找浏览器缓存。 查找系统缓存。 查找路由器缓存。 查找ISP DNS 缓存。 迭代查询。 优化思路 减少DNS查找，避免重定向 使用浏览器DNS缓存 、计算机DNS缓存、 服务器DNS缓存 阅读全文
摘要：
查找ip地址 根据url的域名去查找ip地址 现在dns缓存中查找 dns缓存中查找不到在本机的hosts文中查找有无对应ip hosts文件中没有,就去上级dns服务器中查找,知道找到根目录为止 tcp链接和http请求 http协议建立在tcp协议之上,所以要先建立tcp链接,就是我们的tcp三 阅读全文
摘要：
前言 路由传参都会涉及到路由配置项中的props 布尔模式的路由传参 正常情况下的传参通过在路由表中定义/:属性,在路由表对应的component中用$route.params.属性接收.这种传值方式有一个弊端,就是$route和路由形成了耦合,让组件只能在特定的路由上使用.如下,User组件的$r 阅读全文
摘要：
前言 封装wx.request为异步,以便利用async await function http(options){ return new Promise((reslove,reject)=>{ wx.request({ url:options.url, method:options.method, 阅读全文