返回顶部

[Vue.js] vue nexttick的理解和使用场景讲解明白

[复制链接]
awagink 显示全部楼层 发表于 2021-2-20 18:07:56 |阅读模式 打印 上一主题 下一主题
试听
亲,登录后才能试听哦。
登录方法:
1.电脑版在右上角【登录】
2.手机版点右下角【登录】进入登录页面。
应用场景
需要在视图更新之后,基于新的视图进行操作

文档说明
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

nextTick原理
1、异步说明
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新
2、事件循环说明
简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

created、mounted
在 created 和 mounted 阶段,如果需要操作渲染后的试图,也要使用 nextTick 方法。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

  1. mounted: function () {
  2.   this.$nextTick(function () {
  3.     // Code that will run only after the
  4.     // entire view has been rendered
  5.   })
  6. }
复制代码

以下使用nexttick的三种情况
1、点击按钮显示原本以 v-show = false 隐藏起来的输入框,并获取焦点。

  1. showsou(){
  2.   this.showit = true //修改 v-show
  3.   document.getElementById("keywords").focus()  //在第一个 tick 里,获取不到输入框,自然也获取不到焦点
  4. }
复制代码

修改为:

  1. showsou(){
  2.   this.showit = true
  3.   this.$nextTick(function () {
  4.     // DOM 更新了
  5.     document.getElementById("keywords").focus()
  6.   })
  7. }
复制代码

2、点击获取元素宽度。

  1. <div id="app">
  2.     <p ref="myWidth" v-if="showMe">{{ message }}</p>
  3.     <button @click="getMyWidth">获取p元素宽度</button>
  4. </div>

  5. getMyWidth() {
  6.     this.showMe = true;
  7.     //this.message = this.$refs.myWidth.offsetWidth;
  8.     //报错 TypeError: this.$refs.myWidth is undefined
  9.     this.$nextTick(()=>{
  10.         //dom元素更新后执行,此时能拿到p元素的属性
  11.         this.message = this.$refs.myWidth.offsetWidth;
  12.   })
  13. }
复制代码

3、使用 swiper 插件通过 ajax 请求图片后的滑动问题。

参考阅读:
https://segmentfault.com/a/1190000012861862?utm_source=tag-newest
您需要登录后才可以回帖 登录 | 注册

本版积分规则

纳速健身网 成立于2006年8月,是目前国内优秀健身运动网站,拥有超过30万会员。形成了以健身伴奏音乐、养生知识、武术、太极拳、健身气功、运动健身等优质视频、图文教程及文章信息分享的一体化站点。为健身爱好者提供了一个健身运动信息资源交流的平台。
  • 纳速QQ群乙:151815303
  • 纳速QQ群丙:79104490
  • 微信交流群:微信好友搜索【nasuwang】加客服微信进群,备注【纳速】
  •                     或者扫描页面底部右侧二维码添加客服微信>>>
  • 微信公众号

  • 微信群客服交流

  • Copyright © 2006-2021, 纳速健身网. | | 辽ICP备13002388号-1 辽公安网备21050202000005号公安网备号 纳速武术-乙 QQ