纳速健身

标题: vue nexttick的理解和使用场景讲解明白 [打印本页]

作者: awagink    时间: 2021-2-20 18:07
标题: vue nexttick的理解和使用场景讲解明白
应用场景
需要在视图更新之后,基于新的视图进行操作

文档说明
在下次 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




欢迎光临 纳速健身 (https://www.nasue.com/) Powered by Discuz! X3.4