javascript - vue nexttick map

Question

我有一个<div id="map" />

我有一个已安装的方法，可以在其中初始化 map 。

mounted(){
 this.map = L.map(this.mapId, { preferCanvas: true }).setView(
  [this.initialLatitudeOriginalPoint, this.intiialLongitudeOriginalPoint],
        3
 )
L.tileLayer(
        tileconfig + '?access_token=' + key
        { maxZoom: 25, id: 'mapbox.streets' }
      ).addTo(this.map)
}

我有一个叫做标记的 Prop 。我有一个立即正确的观察者

markers:{
      handler(newVal, oldVal){
        this.showMarkers()
      },
      immediate: true
    },

问题- 看起来像 watcher首先被调用。安装之前。然后showMarkers函数会抛出错误，因为不会定义 map ，因为 watcher之前获得第一 mounted 。对于那个观察者来说，我真的需要立即的真实。有什么方法可以让我知道在 map 未定义之前，观察者应该等待吗？

我的想法:我想使用 nextTick 。但我不明白这一点。如果我在观察者的处理函数中编写 this.$nextTick ，那么 nextTick 回调何时会被调用？在 dom 在这个特定组件中甚至在 parent 和 parent 的 parent 中更新之后？如果它不关心当前组件，那么 nextTick 在我的情况下可能会有点错误。我只是想了解 nextTick 的最后一件事。有什么线索吗？

Answer 1

首先，您是正确的，immediate 会导致 watch 在组件安装之前被触发。 watch 的作用主要是根据其他属性执行属性更新。因此，它将等待所有基本属性( Prop 、数据等)初始化，但它假设渲染需要 watch 的输出才能正确渲染。就您而言，这不是真的。

我的写法是:

mounted () {
  // ... map stuff ...

  this.showMarkers()
},

watch: {
  markers: 'showMarkers'
}

如果需要有一个 nextTick ，我会倾向于在 showMarkers 中执行此操作，而不是让它成为调用者的问题。

但是，您不必这样做。您可以按照问题中的建议使用 immediate 和 nextTick 来完成此操作。

因此关键是要了解 nextTick 何时被调用。

如果渲染依赖项发生变化，Vue 不会立即重新渲染组件。相反，它被添加到队列中。一旦所有其他代码完成运行，Vue 将处理该队列。这比听起来更复杂，因为父/子层次结构中的各种组件可能需要更新。更新父级可能会导致子级不再存在。

处理完队列并更新 DOM 后，Vue 将调用任何 nextTick 回调。回调内发生的任何进一步更改都将添加到新的渲染队列中。

这里有几个要点需要注意。

1. 虽然 Vue 可能已经更新了 DOM，但在 JavaScript 代码完成之前浏览器实际上不会绘制所有新节点。其中包括任何 nextTick 回调。因此，如果 nextTick 触发进一步更新，用户将看不到页面的临时状态。
2. 所有这一切都假设 Vue 正在跟踪更新并执行渲染。如果您在 Vue 之外进行渲染(就像通过 Leaflet 一样)，那么 Vue 无法为您提供太多帮助。

所以让我们考虑以下问题:

markers:{
  async handler(newVal, oldVal){
    await this.$nextTick()  
    this.showMarkers()
  },
  immediate: true
},

我在这里使用了 async/await 而不是传递回调，但最终结果是相同的。

在组件渲染之前第一次调用处理程序时。 $nextTick 将在所有渲染完成(包括其他组件)后调用。只要其他组件不假设标记已经存在，这就不应该成为问题，它们仍然会在用户看到任何内容之前创建。

当标记随后发生变化时，它实际上可能不会触发Vue中的任何渲染。除非您在某个模板中的某处使用标记，否则它不会成为渲染依赖项，因此不会触发新的渲染。这不一定是问题，因为即使 Vue 没有任何内容可渲染，$nextTick 仍然可以工作。