Vue使用nextTick获取最新的DOM
2020-12-14 本文已影响0人
Grit_1024
Vue使用nextTick获取最新的DOM
1.上代码
每点击一次，则会向数组内增加三项
<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.当我点击一次按钮的时候，我们发现打印出来的数组只有3项，并且数组长度是3，但是原本数组是有3项的，应该有6项才对，这是什么原因呢？
原因是：vue 更新dom是异步的！！！
image.png
往数组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
