vue开发中遇到的一些问题及解决方案
发布时间
阅读量：
阅读量
Case 1，vue项目在IE中自动读取缓存中的数据，不重新发请求
解决方案：
// 在每个请求上增加时间戳
config.url = `${config.url}?_t=${+new Date()}`Case 2，组件强制刷新
在动态赋值时, 如果发现DOM无法快速更新而导致页面未能正确呈现, 则可以通过强制刷新组件来解决问题.
//模版上绑定key
<SomeComponent :key="theKey"/>
//选项里绑定data
data(){
return{
theKey:0
}
}
//刷新key达到刷新组件的目的
theKey++;场景2：由于组件嵌入过于复杂而导致嵌套层级过深的问题出现，并影响了组件本身以及其依赖于el-option组件的数据量过大的情况下的刷新效果。在@change事件处理函数中引入官方提供的更新视图功能选项框以解决此问题。
//模版上绑定change
<el-select @change="changeContent"/>
// 官方给出的更新选择框视图方法
this.$forceUpdate()
//刷新key达到刷新组件的目的
changeContent (val) {
this.$forceUpdate()
},Case 3，vue引入本地图片的特殊情况
除了Image标签中的src属性和CSS中的background属性：使用url()函数获取图片路径外（简称background属性），其他情况下如果需要引用本地项目静态资源图片，则必须采用require(’…/…/assets/img/aaa.png’)的方式进行导入（即调用require函数并传递该路径），而不可以直接通过将文件路径字符串作为参数传递给require函数的方式引入图片。
如在某个组件内引用，如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 钩子）触发时，请您将某个变量置空状态，并且在每次触发计时器事件时都需要检查该标志是否为真以决定是否进行清除此项操作。因此，在每次触发计时器事件时都需要检查该标志是否为真以决定是否进行清除此项操作
// 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 {
// 页面聚焦
}
})
}全部评论 (0)
还没有任何评论哟~