记录一些踩过的坑

1.select在读后台数据的时候显示value不显示label，是因为读过来的数据类型跟定义value值的数据类型不一致

解决方案1：value设置成number类型

解决方案2：value设置时是string，读取后台数据的时候用toString()

参考：滑动验证页面

2.el-input使用ref时，this.$refs........focus()会显示没有这个方法

解决方案：首先要看this.$refs.options有没有读到，读到的话看里面都有什么方法，很有可能在深层

this.$refs.options[index].$el.querySelector('input').focus();

3.使用setTimeout()或者setInterval()，在组件销毁之前要清空定时器

this.timeLeftTimer = setTimeout(() => {}, 1000);

在beforeDestroy()里面清除

if (this.timeLeftTimer) {
    clearTimeout(this.timeLeftTimer);
}

4.Canvas

一言难尽，想写的时候再说。先贴一下比较有印象的：

• 字体描边

参考：https://www.cnblogs.com/hamsterPP/p/5260195.html

• 设置字体样式

// 字体颜色
this.ctx.fillStyle = color;
// 是否加粗（font-weight），字号，字体
this.ctx.font = `${bold ? `${bold} ` : ''}${fontSize}px ${fontFamily}`; 

5.CSS3 nth-child()区间选择

// 项共有的样式部分放一起就行了，单独写不同的
// 选择前7项
&-button:nth-child(-n+7) {
    // 样式
}
// 选择第8项开始到最后一项
&-button:nth-child(n+8) {
    // 样式
}

6.iframe有缓存，页面更改不更新

问题：src请求的地址没变，浏览器就加载缓存了

解决方案：在请求的iframe src后缀加入一个时间戳，确保每次加载时，让浏览器知道它是最新的页面，避免缓存

参考：iframe缓存刷新问题-CSDN博客

解决方案：关注到有博客说添加随机字符串会击穿CDN缓存，所以修改了原方案，只添加任意固定字符串，只要保证不读取浏览器缓存就可以了。

参考：使用html2canvas在前端生成图片 - 简书

在测移动端时，发现微信内置浏览器由于缓存，一直都不会对页面进行更新。

Charles抓包发现一些样式文件请求时返回304（js, css），但实际上样式文件每次在版本发布的时候会在样式文件的文件名后添加hash，html入口文件没有加hash。

抱大腿后得知，版本发布的时候会清空服务器缓存，不会让用户再访问到修改之前的内容，所以不用考虑缓存问题了。PC端也不用考虑了。

7.new Date要注意月份范围是0-11，所以一定要记得-1