获得徽章 27
- #每天一个知识点# 前端截图分两种
1、Canvas截图（代表html2canvas），通过遍历DOM克隆一份副本，将此副本在Canvas上重新绘制，并根据DOM的样式应用在对应的绘制元素上，再通过Canvas生成图片。转换过程可理解成：DOM→Canvas→Image。
2、SVG截图（代表rasterizehtml），通过遍历DOM克隆一份副本，利用SVG的foreignObject把DOM作为外部资源嵌套在SVG中，将此SVG在Canvas上重新绘制，并根据DOM的样式应用在对应的绘制元素上，再通过Canvas生成图片。转换过程可理解成：DOM→SVG的ForeignObject→Canvas→Image。
两种前端截图方式最后都是通过把DOM绘制到Canvas，再通过Canvas输出图片。展开评论点赞 - #每天一个知识点#
如何统一监听Vue组件报错？
1.window.onerror
全局监听所有JS错误
但它是JS级别的，识别不了Vue组件信息
捕捉一些Vue监听不到的错误,比如异步的报错
2.errorCaptured 生命周期 （App.vue）
监听所有下级组件的错误
返回false会阻止向上传播
监听要重要的、有风险的组件错误
3.errorHandler配置 (main.js)
Vue 全局错误监听，所有组件错误都会汇总到这里
但是errorCaptured 返回false，就不会传播到这里
和window.onerror 互斥
异步错误 无法捕获需要用window.onerror
Promise 未处理的catch需要 onunhandledrejection展开评论点赞 - #每天一个知识点# flex 布局
flex 属性，默认值 0 1 auto (flex-grow、flex-shrink、flex-basis的缩写)
（即三者的默认值：flex-grow: 0(存在空间，也不放大。); flex-shrink: 1(空间不足，缩小); flex-basis: auto(项目的本来大小);）
* flex: auto; (1 1 auto)
* flex: none; (0 0 auto)
* flex: 1; (1 1 0%) 取值为非负数数字 => 数字 数字 0%
* flex: 10px/10%； (1 1 10px/10%) 取值为一个长度或百分比 => 1 1 长度/百分比
* flex: 1 2; (1 2 0%) 取值为两个非负数字 => 数字1 数字2 0%
* flex: 2 10px/10%; (2 1 10px/10%) 取值为一个非负数字和一个长度或百分比 => 数字 1 长度/百分比展开评论点赞