nextTick在elementui表格中的使用

笔者今天对前端嵌套的表格进行新增一行的操作时，发现点击了新增之后，表格没有实时刷新。
经过查询，发现需要在组件更新之后，基于新的组件进行操作时，都得使用nextTick才能看到更新的部分。
vue2中对nextTick方法的解释：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

查看Elementui文档之后，结合了doLayout方法。
Elementui中doLayout方法的解释：

对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。

最后代码：

userRecords.push({ id: '', user_name: '', user_age: '', begin_date: '', user_sex: '' })
this.$refs['totalTableRef'].doLayout()
this.$nextTick(_ => {
  this.$refs[userTableRef].doLayout()
})

大家可能觉得很难理解，如果详细说就得涉及到javascript中线程的执行顺序的问题了。
javascript是个单线程的语言，所以它前一个任务结束之后，才会执行后一个任务。但是，大家想了其它法子，变相的让它有点多线程的感觉。
根据各种资料，以及参考了阮一峰老师的文章，以下的文字是借鉴了阮一峰老师的。

所有任务可以分成两种。

一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

接着来看任务的执行顺序：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

再来引用一下我上面的代码：
不用nextTick()方法

userRecords.push({ id: '', user_name: '', user_age: '', begin_date: '', user_sex: '' })
this.$refs['totalTableRef'].doLayout()
this.$refs[userTableRef].doLayout()

这时候，是看不到我新增的那一行的。
用了nextTick之后，才能看到我新增的那一行。

专业一点说，就是我新增之后，因为js是单线程执行的，所以我的dom树还来不及更新，要执行很多线程，才能刷新。我使用了nextTick方法，这样子就能快速刷新了。

感觉应该还有一些不通顺，等之后技术水平提升之后，笔者再来更新概念。