vue-$nextTick
程序员文章站
2022-06-22 13:53:03
$nextTick原理：vue是异步渲染的，$nextTick 待 DOM 渲染完再回调（nextTick函数将回调延迟到下次 DOM 更新循环之后执行）页面渲染时会将data的修改做整合，多次data修改只会渲染一次列：
- {{item}} ...
$nextTick
列：
<!--template-->
<ul ref="listdata">
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
<button @click="addItem">添加</button>
addItem(){
this.list.push(`${new Date()}`)
this.list.push(`${new Date()}`)
this.list.push(`${new Date()}`)
let list=this.$refs.listdata
console.log(list.childNodes.length)
}
打印结果如下
当我们将打印的内容放置nextTick中，如下
addItem() {
this.list.push(`${new Date()}`);
this.list.push(`${new Date()}`);
this.list.push(`${new Date()}`);
this.$nextTick(() => {
let list = this.$refs.listdata;
console.log(list.childNodes.length);
});
},
打印结果则是下图
本文地址：https://blog.csdn.net/shiqina/article/details/114264388
下一篇： JSP中“预定义变量”的使用