1.vue更新dom是异步更新的,在程序中修改完数据不会立即更新;
2.更新过程是批量更新的,在一次操作中若修改了三次数据,但是dom只更新一次;这样能减少对性能的消耗;
3.可以在this.$nextTick中进行更新dom后的操作。
<h1>使用nextTick获取最新dom</h1>
<ul ref="list">
<li v-for='item in listData' ::key="item.id">
{{item}}
</li>
</ul>
<button @click="addItem">新增</button>
data:{
return{
listData:["列表项1",'列表项2','列表项3']
}
}
methods:{
addItem(){
this.listData.push(Date.now() );
this.listData.push(Date.now() );
this.listData.push(Date.now() );
const listRef = this.$refs.list;
console.log(listRef.childNodes.length);
},
}
更新完数据后立即获取到的dom中数据并不是最新的。
<h1>使用nextTick获取最新dom</h1>
<ul ref="list">
<li v-for='item in listData' ::key="item.id">
{{item}}
</li>
</ul>
<button @click="addItem">新增</button>
data:{
return{
listData:["列表项1",'列表项2','列表项3']
}
}
methods:{
addItem(){
this.listData.push(Date.now() );
this.listData.push(Date.now() );
this.listData.push(Date.now() );
this.$nextTick(()=>{
const listRef = this.$refs.list;
console.log(listRef.childNodes.length);
})
},
}
我们发现this.$nextTick只更新了一次,而且获取到了最新的dom值