vue-----nextTick

 

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

 

$nextTick

获取最新的dom结构，nextTick会在dom更新后，执行回调函数

应用场景：需要在视图更新之后，基于新的视图进行操作。

在 created 和 mounted 阶段，如果需要操作渲染后的视图，也要使用 nextTick 方法。

 eg:

//改变数据
vm.message = ‘changed‘

//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到‘changed‘

//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到‘changed‘
})

图解：

 

 

 

其他应用场景

其他应用场景如下三例：

例子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 请求图片后的滑动问题。