Vue使用nextTick獲取最新的DOM
1.上代碼
每點擊一次，則會向數(shù)組內增加三項
<body>
<div id='app'>
<h1>使用nextTick 獲取最新的dom</h1>
<ul ref='list'>
<li v-for="(item,index) in lisData" :key='index'> {{item}}</li>
</ul>
<button @click=additem()>點擊</button>
</div>
<script>
new Vue({
el: '#app',
data: {
lisData: ['第一項', '第二項', '第三項',]
},
methods: {
additem() {
// vue的dom更新是異步的窄俏。
this.lisData.push(Date.now())
this.lisData.push(Date.now())
this.lisData.push(Date.now())
const listref = this.$refs.list;
console.log(listref.childNodes);
console.log(listref.childNodes.length);
}
}
})
</script>
</body>
2.當我點擊一次按鈕的時候脱货，我們發(fā)現(xiàn)打印出來的數(shù)組只有3項，并且數(shù)組長度是3风瘦，但是原本數(shù)組是有3項的队魏，應該有6項才對，這是什么原因呢万搔？
原因是：vue 更新dom是異步的：啊！瞬雹！
image.png
往數(shù)組push新的值的時候不是dom馬上更新的昧谊，而是異步渲染的,如果我們要獲取最新的dom的話就可以使用nextTick,實際他就是實例上的 一個方法，直接調用就好了
代碼如下：
<body>
<div id='app'>
<h1>使用nextTick 獲取最新的dom</h1>
<ul ref='list'>
<li v-for="(item,index) in lisData" :key='index'> {{item}}</li>
</ul>
<button @click=additem()>點擊</button>
</div>
<script>
new Vue({
el: '#app',
data: {
lisData: ['第一項', '第二項', '第三項',]
},
methods: {
additem() {
// vue的dom更新是異步的酗捌。
this.lisData.push(Date.now())
this.lisData.push(Date.now())
this.lisData.push(Date.now())
this.$nextTick(() => {
const listref = this.$refs.list;
console.log(listref.childNodes);
console.log(listref.childNodes.length);
})
}
}
})
</script>
</body>
image.png
