Vue.js 延迟监视

当 Vue.js 监测到数据变化时，它将立即更新模型，然后 DOM 将被重新渲染以体现这些更改。通常情况下，这是非常有用的，但是在某些情况下，我们希望能够延迟此更新操作直到我们真正需要更新 DOM。

为什么需要延迟监视？

• 当数据更改时，Vue.js 会立即更新模型并重新渲染 DOM。这通常是令人满意的，但在某些情况下，它会引起性能问题。例如，如果您有一个要执行的昂贵操作，而您希望用户完成其他任何操作后再进行操作，那么您可以暂时禁用自动更新以获得更好的响应速度。

• Vue.js 对于计算属性或侦听器更新也是如此。如果您需要跨 UI 进行昂贵的计算，或者侦听器的响应时间很长（通常发生在 I/O 操作等情况下），那么您可能需要考虑延迟监视。

怎么做？

Vue.js 通过 $nextTick 方法提供了一个 API，该方法允许您在下一次 DOM 更新之前执行异步操作。这意味着您可以更改模型并在更新 DOM 之前等待一段时间。

this.$nextTick(() => {
  // code here will be executed after the DOM has been updated
})

假设我们有一个到后端 API 的调用，这可能需要一定的时间来完成。为了避免阻止用户界面，我们可以将界面恢复为加载状态，并在异步操作完成后更新模型：

<template>
  <div>
    <button @click="onSubmit">提交</button>
    <img v-if="loading" src="loading.gif">
    <div v-if="!loading">
      <!-- ... -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      data: {}
    }
  },
  methods: {
    onSubmit() {
      this.loading = true
      // perform the expensive operation
      fetchData().then(data => {
        this.$nextTick(() => {
          this.loading = false
          this.data = data
        })
      })
    }
  }
}
</script>

在上面的示例中，当用户单击提交按钮时，加载状态将启用。调用 fetchData 将在异步操作完成后返回数据。我们使用 $nextTick 确保 loading 和 data 属性在重新渲染 DOM 之前正确设置。