纳速健身

标题: 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

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

复制代码

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

showsou(){
this.showit = true //修改 v-show
document.getElementById("keywords").focus() //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
}

复制代码

修改为：

showsou(){
this.showit = true
this.$nextTick(function () {
// DOM 更新了
document.getElementById("keywords").focus()
})
}

复制代码

2、点击获取元素宽度。

<div id="app">
<p ref="myWidth" v-if="showMe">{{ message }}</p>
<button @click="getMyWidth">获取p元素宽度</button>
</div>
getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;
//报错 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后执行，此时能拿到p元素的属性
this.message = this.$refs.myWidth.offsetWidth;
})
}

复制代码

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

参考阅读：
https://segmentfault.com/a/1190000012861862?utm_source=tag-newest

欢迎光临纳速健身 (https://nasue.com/)