vue---nextTick的理解总结

首先附上官网学习地址：https://cn.vuejs.org/v2/api/index.html#Vue-nextTick

Vue.nextTick( [callback, context] )

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

例子展示：

<template>
  <div>
    <button @click="changeMsg">改变msg</button>
    <div ref="msgDiv">{{msg}}</div>
    <div v-if="msg1">不执行$nextTick {{msg1}}</div>
    <div v-if="msg2">执行 $nextTick {{msg2}}</div>
    <div v-if="msg3">不执行 $nextTick {{msg3}}</div>
  </div>
</template>
<script>
export default {
  name: "nextTick",
  data() {
    return { msg: "nextTick学习.", msg1: "", msg2: "", msg3: "" };
  },
  methods: {
    // 为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
    changeMsg() {
      this.msg = "Hello";
      this.msg1 = this.$refs.msgDiv.innerHTML;
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML;
      });
      this.msg3 = this.$refs.msgDiv.innerHTML;
    }
  }
};
</script>
<style>
</style>

结果展示如下：当仅点击1次【改变msg】按钮，在msg数据变化之后等待 Vue 完成更新 DOM 之后，执行Vue.nextTick(callback) 。

再次点击【改变msg】按钮，dom均已更新了一次，所以msg1和msg3的值也更新了。

说说我为什么会用到它。当每次点击节点标签，从后台获取到节点数据，调用画图函数把数据渲染在页面上，且之前渲染的图还在，类似于neo4j数据库。这里将把后台传过来的唯一标志时间戳（timestamp）作为存放图的dom的id.

 <!--width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
 <div :id="item.timestamp" style="height:470px"></div>

调用【init（id）】函数进行图形渲染

 //点击节点标签
    showNodes(name) {
      this.showNodeInfo = false;
      nodeGraphGet(name)
        .then(res => {
          console.log("点击节点标签res", name);
          if (res.status === 200) {
            var data = {
              // 节点数组
              nodesArray: res.data.result.data,
              // 用作渲染图的dom id
              timestamp: res.data.timestamp,
              graphTopValue: res.data.result.script,
              nodeCount: res.data.result.count,
              edgeCount: 0,
              count: res.data.result.count,
              categoryArray: [{ category: name, count: res.data.result.count }]
            };
            this.graphData.unshift(data);
            // Vue.nextTick用于延迟执行一段代码
            this.$nextTick(() => {
              this.init(data.timestamp);
            });
          } else {
            this.$message.error(res.data.respDesc);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },