Skip to content

WARNING

本页面文档暂未更新

  1. $nextTick()nextTick 是 Vue.js 的一个异步API,用于在 DOM 更新之后执行一段延迟的操作。在 Vue.js 中,当修改数据后触发数据更新,但是 DOM 并不会立即更新,而是加入到异步队列中,在下一个时间片去更新 DOM。

nextTick 用于在 DOM 更新后执行一些操作,避免出现数据更新后立即去访问 DOM 却得不到最新的值的问题。例如,在使用 $refs 访问父子组件中的 DOM 元素时,常常需要在 DOM 完全更新后才能正确访问。

html
<script>
export default {
  created() {
    this.$nextTick(() => {
      console.log('渲染完毕之后执行')
    })
  }
}
</script>
<script>
export default {
  created() {
    this.$nextTick(() => {
      console.log('渲染完毕之后执行')
    })
  }
}
</script>

Vue.js 还提供了类似的异步API,例如 $nextTick$forceUpdate 等。 $forceUpdate 则是用于强制更新组件的,它会触发组件的重新渲染。

  1. element刷新表单校验和值
js
this.$refs["formName"].resetFields();
this.$refs["formName"].resetFields();
  1. Vue强制刷新页面内容
js
this.$forceUpdate()
this.$forceUpdate()
  1. Element表格部分数据变化,重新渲染tableData
js