vue开发中遇到的一些问题及解决方案

Case 1，vue项目在IE中自动读取缓存中的数据，不重新发请求

解决方案：

// 在每个请求上增加时间戳
config.url = `${config.url}?_t=${+new Date()}`

Case 2，组件强制刷新

场景1：当组件动态赋值，dom却不能及时更新，无法及时渲染出正确的结果时，可以采用组件强制刷新的方法。

//模版上绑定key
<SomeComponent :key="theKey"/>
//选项里绑定data
data(){
  return{
      theKey:0
  }
}
//刷新key达到刷新组件的目的
theKey++;

场景2：因为组件嵌套太深，导致组件无法刷新或el-option绑定的List数据过多，导致来不及渲染。可以在@change方法内加入官方给出的更新选择框视图方法

//模版上绑定change
<el-select @change="changeContent"/>
// 官方给出的更新选择框视图方法
this.$forceUpdate() 
//刷新key达到刷新组件的目的
changeContent (val) {
  this.$forceUpdate()
},

Case 3，vue引入本地图片的特殊情况

除了img标签的src和css的background：url(),其他情况想要引用本地项目的静态资源图片需要用require(’…/…/assets/img/aaa.png’)的格式，而不能直接用’…/…/assets/img/aaa.png’格式引入。

如在某个组件内引用，如echart中的图标img或icon

icon: {
	show: true,
	cursor: 'pointer',
	img: require('../../assets/img/aa.png'),
	width: 75,
	height: 91
},

Case 4，vue在setTimeout内修改this失效的解决办法

使用function定义setTimeout时，this会优先指向window对象。

setTimeOut(function(){
	console.log(this,'this')
},1000)

①第一种解决方案是必须在它的外层重新拿到当前对象this

let that = this

之后的this都用that代替即可

②第二种解决方案是使用ES6的箭头函数

setTimeOut(() => {
	//执行的代码
},1000)

Case 5，关于计时器无法清除问题

最好不要在外部清除计时器（比如页面销毁的钩子事件中），根据用户的操作不同有一定概率会导致清除失败。最好在setTimeout()和setInterval()内部清除，找一个判断标志。比如在页面销毁时（destroyed钩子)，可以把某个变量置空，然后如果在计时器内部发现这个变量变空，那就说明页面被我销毁了，那么他就自我销毁clearTimeout(A)或clearInterval(B),这样的话他每一轮触发计时器都必须判断这个标志才行，肯定不会出现无法销毁或销毁不及时的问题

// data中定义变量
timeFlag:1
// 页面销毁时,变量置空
destroyed(){
	this.timeFlag = 0
}
// mounted定义定义病启动定时器或者延时器
mounted(){
	var timer
	timer = setInterval(()=>{
		if (!this.timeFlag) clearInterval(timer)
	},1000)
}

又或者

mounted(){
	document.addEventListener('visibilitychange', function() { 
	  var isHidden = document.hidden; 
	  if (isHidden) { 
	    // 页面隐藏
	  } else { 
	    // 页面聚焦 
	  } 
	})
}