首先附上官网学习地址: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);
});
},