vue $nextTick
- Vue是异步渲染,向数组里添加一个数据,vue不会马上渲染,而是会在下一个tick,此时获取地dom还是数据渲染之前地
- $nextTick 只会回调一次
- 获取最新地dom
<div id="app">
<div class="next-tick">
<button v-on:click="add">添加</button>
<ul ref="ulRef">
<li v-for="(item,index) in items" :key="index">
{
{item}}
</li>
</ul>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
items: ['项目已1','项目已2']
},
methods: {
add(){
this.items.push(Math.random())
this.items.push(Math.random())
this.items.push(Math.random())
// 需要跟随数据变化的需要放在nextTick才能保证及时性
// 获取子元素的个数
// const ulElem = this.$refs.ulRef
// const length = ulElem.childNodes.length
// console.log('length',length)
// console.log('length',ulElem.innerHTML)
// 异步调用才能实现批量渲染地效果,
// push三次nextTick的回调只会使用一次
// this.$nextTick(()=>{
// const ulElem = this.$refs.ulRef
// const length = ulElem.childNodes.length
// console.log('length',length)
// })
}
},
})
</script>
</html>