[Talk is cheap. Show me the code]
不想看理论知识请直接移步最后代码示例。
问题描述：
将Element中table组件进行了二次封装后，在后端接口未给出时，自己在页面写了一些假数据，但数据赋值过程中，页面未进行正常渲染数据。
解决方法：
Vue.nextTick(()=>{
//确保DOM节点已经生成，在这里对表格进行赋值，===>表格未渲染数据
}）
01未解决问题
mounted(){
//在这里进行数据的赋值==>表格数据未渲染
}
02未解决问题
03.使用setTimeout(()=>{
//在这里进行数据的赋值==>正常渲染数据
})
解决了问题。
由此也引出了JS代码执行队列的问题。
我们先来 看下 下方代码，请解释下列代码的输出：
console.log("datagrand1")
setTimeout(() => {
console.log("datagrand2")
});
const p0 = new Promise((resolve)=>{
console.log("datagrand3")
resolve()
})
p0.then(()=>{
console.log("datagrand4")
})
console.log("datagrand5")
const p1 = new Promise((reject)=>{
console.log("datagrand6")
reject()
})
p1.then(()=>{
console.log("datagrand7")
})
最终执行结果为：1，3，5，6，4，7，2
发现了吗？ setTimeout 是最后执行的，不论你有没有传入 时间。
至于Promise 内部是按JS执行顺序（谁在前面谁先执行）执行的，then()的回调方法是异步执行的，执行顺序后于普通JS的。
所以这里table组件没有正常加载数据的可能原因是：DOM渲染过程，tableData为空或者为undefined也有可能中途数据发生了变化导致tableData为空。setTimeout(()=>{}) 让 tableData 保证最终拥有有效值。
当然我们实际生产环境是不需要用延时器来对保证数据有效的，http请求是异步且慢于setTimeout的。
代码示例：
setTimeout(() => {
//tableData为表格绑定的值
this.tableData = [{code:1,name:"车辆"},{code:2,name:"时间"}]
});
如果有任何关于本文的意见，请在文章下方留言，我会在看到的第一时间回复。
网友评论