五、nextTick的使用
其内执行的函数可获得dom节点。
<!--src/components/Test/NextTickTest.vue-->
<template>
<div>
<ul ref="refElement">
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "NextTickTest",
data() {
return {
list: [],
};
},
mounted() {
setTimeout(() => {
this.list = ["吃饭", "睡觉", "打豆豆"];
}, 2000);
console.log(this.$refs.refElement); // 获取不到li节点
// list未更新，此时nextTick的回调，不可以获取到dom节点
this.$nextTick(() => {
console.log(this.$refs.refElement); // 获取不到li节点
});
},
watch: {
list(newValue, oldValue) {
// list已经更新完毕，此时nextTick的回调即可获取到dom节点
this.$nextTick(() => {
console.log(this.$refs.refElement); // 可以获取li节点
});
},
},
};
</script>
<style lang="scss" scoped>
</style>
