vue-cli中$nextTick的作用

作用：等待页面渲染完毕回调
场景：操作dom的时候，数据修改，页面还没渲染完毕，就去获取数据，会有延迟，获取的是之前的数据

案例–切换标签内容

当我们需要切换标签的内容时，可能会因为没有渲染完毕，直接调用赋值时，会复制到最初没有改变的数据

  <div class="home"><img alt="Vue logo" src="../assets/logo.png"><h1 ref="msg">msg1：{{msg1}}</h1><h2>msg2：{{msg2}}</h2><h3>msg3：{{msg3}}</h3><button @click="changeMsg()">切换</button></div>

name: 'Home',data() {return {msg1 : "你好",msg2 : '',msg3 : ''}},
methods : {changeMsg() {// 第一种// 改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，// 所以在下面获取的时候获取更新的数据可能有延迟this.msg1 = "我爱我的祖国";this.msg2 = this.$refs.msg.innerHTML;this.msg3 = this.$refs.msg.innerHTML;

第一种解决方法–使用定时器

改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，
所以在下面获取的时候获取更新的数据可能有延迟
当然我们可以使用定时器或者计时器，设置0毫秒，但是当数据变多时，
就不是很友好

<div class="home"><img alt="Vue logo" src="../assets/logo.png"><h1 ref="msg">msg1：{{msg1}}</h1><h2>msg2：{{msg2}}</h2><h3>msg3：{{msg3}}</h3><button @click="changeMsg()">切换</button></div>

export default {name: 'Home',data() {return {msg1 : "你好",msg2 : '',msg3 : ''}},methods : {changeMsg() {// 第一种// 改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，// 所以在下面获取的时候获取更新的数据可能有延迟// 当然我们可以使用定时器或者计时器，设置0毫秒，但是当数据变多时，// 就不是很友好this.msg1 = "我爱我的祖国";setTimeout(function() {this.msg2 = this.$refs.msg.innerHTML;this.msg3 = this.$refs.msg.innerHTML;},0)}}
}

第二种方法（重要）—$nextTick

第二种
所以为了解决这个问题，应该使用$nextTick

export default {name: 'Home',data() {return {msg1 : "你好",msg2 : '',msg3 : ''}},methods : {changeMsg() {// 第一种// 改变了msg1的值，触发了更新，开始渲染，不一定渲染完毕，// 所以在下面获取的时候获取更新的数据可能有延迟// 当然我们可以使用定时器或者计时器，设置0毫秒，但是当数据变多时，// 就不是很友好this.msg1 = "我爱我的祖国";setTimeout(function() {this.msg2 = this.$refs.msg.innerHTML;this.msg3 = this.$refs.msg.innerHTML;},0)// 第二种// 所以为了解决这个问题，应该使用$nextTickthis.msg1 = "我爱我的祖国";this.$nextTick( () => {// 渲染完毕再执行这个，所以才能没有延时的更改this.msg2 = this.$refs.msg.innerHTML;})this.msg3 = this.$refs.msg.innerHTML;}}
}
</script>

vue-$nextTick-等待页面渲染完毕的回调相关推荐

Flutter 添加页面渲染完毕回调
WidgetsBinding.instance.addPostFrameCallback((mag) {print(" 页面渲染完毕"); });
angular监听图片加载完成_angular1.0 如何监听页面渲染完毕（转）
Ant Design 提供了一套非常完整的组件化设计规范与组件化编码规范,大幅提高了部分产品的设计研发效率及质量.Ant Design 与 G2 的代码质量和文档质量都非常高,算是阿里提出 " ...
flutter 如何判断页面渲染完毕
那么在flutter中,我们获取大小也必须在元素渲染完成的时候才行,而有些应用场景要求在第一时间获取到这个元素的大小.那么怎么在第一时间判断元素渲染完成呢?flutter中的WidgetsBuidin ...
python如何校验页面元素是否加载完毕_爬虫（八十七）等待页面加载完成(Waits)...
现在的大多数的Web应用程序是使用Ajax技术.当一个页面被加载到浏览器时, 该页面内的元素可以在不同的时间点被加载.这使得定位元素变得困难, 如果元素不再页面之中,会抛出 ElementNotVis ...
「一道面试题」输入URL到渲染全面梳理中-页面渲染篇
前置知识此文是一道面试题,又不仅仅是一道面试题,不过这道题共分了三篇来说,嗯..可想而知接上文,上文我们讲了网络通信的部分,详细请看「一道面试题」输入URL到渲染全面梳理上-网络通信篇, 那么该说 ...
一文通透从输入URL到页面渲染的全过程----高频面试
一文通透从输入URL到页面渲染的全过程----高频面试喜欢大海喜欢夕阳写下便是永恒文章目录一文通透从输入URL到页面渲染的全过程----高频面试重温进程与线程什么是进程什么是线程进 ...
前端开发这么多年，你真的了解浏览器页面渲染机制吗？
作者 | 浪里行舟前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎.渲染引擎在不同的浏览器中也不是都相同的.目前市面上常见的浏览器内核可以分为这四种 ...
同一个页面生成多个sessionid_web页面渲染（一）
作为开发者,我们经常会面临一些影响我们整个网站结构的决定,其中web开发者一定要做的核心决定之一就是在应用程序中实现逻辑和渲染的位置.这可能比较难,因为有很多不同的方式来构建一个网站. 我们在这一领域 ...
jquery 当页面图片加载之后_在浏览器地址栏输入地址到页面渲染完成发生了什么？（下）...
上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...
后端数据成功返回页面不渲染_在浏览器地址栏输入地址到页面渲染完成发生了什么？（下）...
上一篇讲了前三步,本篇从第四步开始.下面是正文: 四.进行tcp三次握手,建立tcp连接. 简述一下,第三步我们找到了目标ip,并获得了服务器ip的mac地址.此时浏览器就会请求和服务器连接,用来传输 ...

vue-$nextTick-等待页面渲染完毕的回调

vue-$nextTick

vue-cli中$nextTick的作用

案例–切换标签内容

第一种解决方法–使用定时器

第二种方法（重要）—$nextTick

vue-$nextTick-等待页面渲染完毕的回调相关推荐

最新文章

热门文章