nextTick

作用:将回调延迟到下次DOM更新后执行

应用场景:

• 在vue生命周期created()中进行的dom操作一定要放在nextTick中

         crated()钩子在执行的时候,页面中的DOM元素还没有被渲染,所以此时的DOM操作都是无效的

• 在数据发生改变执行某个操作的时候,如果这个操作要使用数据改变后的DOM元素,那么,这个操作应该放在nextTick中

示例:

<el-upload
  ref="upload"
  class="upload-demo"
  :action="url"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :auto-upload="false"
  :on-success="handleSuccess"
  :before-remove="beforeRemove"
  multiple
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

这是近期工作中遇见的问题,我需要在后面的操作中改变url地址,然后上传文件

this.url = this.$wrapUrl(`/netService/catalog/upload?token=${str}&id=${data.id}`)
this.$nextTick(() => {
  this.addDialogVisible = false   //关闭弹框
  this.$emit('refreshDataList')
  this.$refs.upload.submit()
})

写的过程中踩到了两个坑,刚开始没有写nextTick,导致action绑定的url的值一直是默认的空字符串; 第二个坑: 我把关闭弹框的代码写在nextTick外面,也就是提交之前关闭了弹框,导致 this.$refs.upload是undefined