vue中this.$nextTick()的相关讲解(Demo详解)
【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步!吾等采石之人,应怀大教堂之心,愿你们奔赴在各自的热爱中…文章目录一、序言二、案例一、序言本篇一
【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!
博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步!
吾等采石之人,应怀大教堂之心,愿你们奔赴在各自的热爱中…
一、序言
本篇一起了解一下this.$nextTick 相关方法
this.$nextTick 将回调延迟到下次DOM更新循环之后执行。
vue是异步渲染的,当data改变之后,DOM不会立刻被渲染,页面渲染时会将data的修改做整合,多次data修改只会做整合最后一次性渲染出来,这也是异步渲染的原因。只有异步渲染才可以实现整合操作。
二、案例
如下是亲测实践案例,初学者建议实践一波
<template>
<div class="next-tick">
<ul ref="ulRef">
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
<button @click="add">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ['辰兮01', '辰兮02', '辰兮03'],
};
},
methods: {
add() {
//给当前数组添加应该元素
this.items.push('2021辰兮要努力');
//尝试获取当前数组的长度
const firstulElem = this.$refs.ulRef;
const firstlength = firstulElem.childNodes.length;
console.log('firstlength:获取当前数组的长度', firstlength);
//用如上的方式:即使添加了获取的也是原数组的长度,用 this.$nextTick才能真正获取数组改变后的新长度
this.$nextTick(() => {
// 获取子元素个数
const ulElem = this.$refs.ulRef;
const length = ulElem.childNodes.length;
console.log('length:获取当前数组的长度', length);
});
},
},
};
</script>
<style></style>
页面初始化状态,数组里面有三个元素,长度为3
当我们想获取数组添加一个元素后的长度,发现常见的方法在数组添加元素后,获取的还是原来数组的长度
这里我们使用this.$nextTick 即可获取当前最新数组长度
在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
下期介绍相关实践demo…
非常感谢你阅读到这里,如果这篇文章对你有帮助,希望能留下你的点赞👍 关注❤️ 分享👥 留言💬thanks!!!
2021年4月9日23:00:20 愿你们奔赴在自己的热爱里!
更多推荐
所有评论(0)