vue如何获取拉回数据后图片的高度？ <img :src="userInfo.profilePicture" alt class="img-picture" v-if="userInfo.profilePicture" ref="myImg" @load="imageFn" > imageFn(){ console.log(this.$refs.myImg.offsetHeight); console.log(this.$refs.myImg.offsetWidth); }, vue中同一个dom节点，v-if与v-for不推荐同时使用，官方解答： 不推荐同时使用v-if和v...

1、Y坐标文字过长被遮挡 解决办法：设置grid配置项的left为任意数值后，图表会计算y轴宽度并自适应 grid:{ left:0,//与容器左侧的距离 right:0,//与容器右侧的距离 bottom:"3%", top:"0", containLabel:true//grid区域是否包含坐标轴的刻度标签 } 2、X轴标签过长，展示不全 解决办法：旋转角度，倾斜展示或者省略号表示 xAxis:{ axisLabel:{ color:"5e6877",//x轴字体颜色 interval:0,//0强制显示所有标签,默认auto rotate:20//刻度标签旋转的角度 } } /...

⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。 压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS⽂件，利⽤cssnano（css-loader?minimize）来压缩css利⽤CDN加速:在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于output参数和各loader的publicPath参数来修改资源路径TreeShaking:将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack...

1、beforeCreate（创建前）：数据观测和初始化事件还未开始，此时data的响应式追踪、event/watcher都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。 2、created（创建后）：实例创建完成，实例上配置的options包括data、computed、watch、methods等都配置完成，但是此时渲染得节点还未挂载到DOM，所以不能访问到$el属性。 3、beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html...

AJAX是AsynchronousJavaScriptandXML的缩写，指的是通过JavaScript的异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。 创建AJAX请求的步骤： 创建一个XMLHttpRequest对象。 在这个对象上使用open方法创建一个HTTP请求，open方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。 在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过setRequestHeader方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个XMLHttpRequest对象一共有...

相似之处： 都将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库； 都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模板； 都使用了VirtualDOM（虚拟DOM）提高重绘性能； 都有props的概念，允许组件间的数据传递； 都鼓励组件化应用，将应用分拆成一个个功能明确的模块，提高复用性。 不同之处： 1）数据流 Vue默认支持数据双向绑定，而React一直提倡单向数据流 2）虚拟DOM Vue2.x开始引入"VirtualDOM"，消除了和React在这方面的差异，但是在具体的细节还是有各自的特点。 Vue宣称可以更快地计算出VirtualDOM的差异，这是由于...

子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。如果这样做了，Vue会在浏览器的控制台中发出警告。 Vue提倡单向数据流，即父级props的更新会流向子组件，但是反过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据流变得难以理解，导致数据流混乱。如果破坏了单向数据流，当应用复杂时，debug的成本会非常高。 只能通过$emit派发一个自定义事件，父组件接收到后，由父组件修改。

slot又名插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。 默认插槽：又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。 具名插槽：带有具体名字的插槽，也就是带有name属性的slot，一个组件可以出现多个具名插槽。 作用域插槽：默认插槽、具名插槽的一个变体，可以是匿名插槽，也可以是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，可以将子组件内部的数据传递...

（1）typeof 其中数组、对象、null 都会被判断为 object，其他判断都正确。 （2）instanceof instanceof 可以正确判断对象的类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。 可以看到，instanceof 只能正确判断引用数据类型，而不能判断基 本数据类型。instanceof运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 （3）constructor constructor 有两个作用，一是判断数据的类型，二是对象实例通过 constrcutor对象访问它的构造...

push():在数组末尾添加一个或多个元素，并返回新数组的长度。 pop():移除并返回数组末尾的元素。 unshift():在数组开头添加一个或多个元素，并返回新数组的长度。 shift():移除并返回数组开头的元素。 concat():合并两个或更多数组，并返回新的合并后的数组，不会修改原始数组。 slice():从数组中提取指定位置的元素，返回一个新的数组，不会修改原始数组。 splice():从指定位置删除或替换元素，可修改原始数组。 indexOf():查找指定元素在数组中的索引，如果不存在则返回-1。 lastIndexOf():从数组末尾开始查找指定元素在数组中的索引，如果不存...

在平常项目开发中，我们遵守一些这样的基本规范，比如说： （1）一个函数作用域中所有的变量声明应该尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明，声明时   如果变量没有值，应该给该变量赋值对应类型的初始值，便于他人阅读代码时，能够一目了然的知道变量对应的类型值。 （2）代码中出现地址、时间等字符串时需要使用常量代替。 （3）在进行比较的时候吧，尽量使用'=','!'代替'','!='。 （4）不要在内置对象的原型上添加方法，如Array,Date。 （5）switch语句必须带有default分支。 （6）for循环必须使用大括号。 （7）if语句必须使...

redux是一个应用数据流框架，主要是解决了组件间状态共享的问题，主要包括三个核心方法，action，store，reducer 关于Store： 整个应用只有一个唯一的Store Store对应的状态树（State），由调用一个reducer函数（rootreducer）生成 状态树上的每个字段都可以进一步由不同的reducer函数生成 Store包含了几个方法比如 dispatch, getState 来处理数据流 Store的状态树只能由 dispatch(action) 来触发更改 Redux的数据流： action是一个包含&n...

SPA（single-pageapplication）仅在Web页面初始化时加载相应的HTML、JavaScript和CSS。一旦页>面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现>HTML内容的变换，UI与用户的交互，避免页面的重新加载。 优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理； 缺点：初次加载耗时多：为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS...

window.alert()显示一个提示信息 window.confirm()显示一个带有提示信息、确定和取消按钮的对话框 window.prompt()显示可提示用户输入的对话框 setTimeout与setInterval的区别 setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。 不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。 window.setTi...

apply方法 apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入，且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次。 call方法 call方法的第一个参数也是this的指向，后面传入的是一个参数列表（注意和apply传参的区别）。当一个参数为null或undefined的时候，表示指向window（在浏览器中），和apply一样，call也只是临时改变一次this指向，并立即执行。 bind方法 bind方法和cal...

gitclone：克隆远程仓库到本地。 gitinit：在当前目录初始化一个新的Git仓库。 gitadd：将文件添加到暂存区，准备提交。 gitcommit-m"commit_message"：提交暂存区的改动到本地仓库，附带提交信息。 gitstatus：查看工作区、暂存区的状态，显示文件的修改情况。 gitdiff：显示工作区与暂存区之间的差异。 gitdiff--staged：显示暂存区与最后一次提交之间的差异。 gitlog：显示提交日志，包括提交哈希、作者、日期等信息。 gitbranch：列出所有分支，当前分支前会有一个星号。 gitcheckout：切换到指定分支。 gitc...

防抖（debounce） 所谓防抖，就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。 非立即执行版的意思是触发事件后函数不会立即执行，而是在n秒后执行，如果在n秒内又触发了事件，则会重新计算函数执行时间。 立即执行版的意思是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果。 节流（throttle） 所谓节流，就是指连续触发事件但是在n秒中只执行一次函数。节流会稀释函数的执行频率。 对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

注意：获取摄像头影像主要是通过navigator.getUserMedia这个接口，在caniuse.com上查询一下这个接口的支持情况，可以看到目前只有Chrome和Firefox支持得比较好，而且都要加上自家的前缀，移动端几乎全线不可用。 属性：window.navigator.getUserMedia();获取摄像头形象主要通过getUserMedia这个接口 案例代码： //首先要有个video标签 <videoid="video"></video> varvideo=document.getElementById('video'); //getUserMei...

链接预取：浏览器会自动在后台把你需要加载的页面下载下来，当用户要点击进入该页面的时候，浏览器会从缓存把这个页面取出来，页面的加载速度就会加快。 标签属性：rel=‘next’ 页面预加载很简单，只需要加上：<linkrel='next'href='xxx.html'> 要预加载静态资源的话也可以实现 <linkrel="prefetch"href="/images/big.jpeg"> 适用场景： 1.当你有一篇篇幅很长的文章，或在线教程，或图册等，需要分成多页显示时。 2.在你的网站首页预加载那些用户最可能访问的下一页。(可能是一个商品网站上“重点推荐”商品页面，或博...

webworker是html5提供的一个JavaScript多线程的解决方案，worker用于处理一些大量复杂耗时的计算，免得页面冻结、挂起、卡死。 比如：我们要运算一个复杂的数学计算：递归计算。 varfibonacci=function(n){ returnn<2?n:arguments.callee(n-1)+arguments.callee(n-2); }; fibonacci(40) 当参数达到40或者以上的时候，页面就会出现明显的卡死现象。这个时候用户就只能等待算计结束才可以做其他操作。这种情况下就适合使用worker开辟新线程来处理这个运算。 main.html页面为主...