vue中$nextTick的用法

Posted 2023-04-21

参考技术A 在vue中有一种情况，获取了数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要$nextTick函数（或者setTimeout）。
比如：

使用示例

1、在生命周期created()中进行的dom操作一定要放到nextTick()的回调函数中。
2、在数据变化后要执行某个操作，而这个操作需要使用随数据变化而变化的dom结构时，这个操作都应该放进nextTick()的回调函数中。

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0)代替。

vue中nextTick的使用

      最近使用vue的vm.$nextTick的用法比较多，现在整理一下它的用法。

     推荐阅读：http://www.ruanyifeng.com/blog/2014/10/event-loop.html

　  官方文档上这么说的：将回调延迟到下次DOM渲染之后执行。在修改数据后立即使用它，然后等待DOM更新。它和全局方法Vue.nextTick一样，不同的是回调的this自动绑定在它应用的实例上

　　上述的话也可以这么理解，我们可以把需要在渲染DOM元素出来后的一些方法放在created生命周期中，不过需要借助vm.$nextTick() 这个回调函数中执行

　　或者第二个用法就是在我们更新数据后，vm.$nextTick这个函数中，等待DOM更新时使用。

　　其实项目中最常用的就是在组件中使用vm.$nextTick的方法，并且回调函数中的this，会自动绑定在当前的vue实例上

　　举例：　

//官网案例
Vue.component(‘example‘, {
  template: ‘<span>{{ message }}</span>‘,
  data: function () {
    return {
      message: ‘未更新‘
    }
  },
  methods: {
    updateMessage() {
      this.message = ‘已更新‘
      console.log(this.$el.textContent) // => ‘未更新‘
      this.$nextTick(() => {
        console.log(this.$el.textContent) // => ‘已更新‘
      })
    }
  }
})

上述官方给的案例，我们也可以写成如下方式：通过使用ES7中的async/await的语法完成,这样后面输出的就是已更新的值

methods: {
  updateMessage: async function () {
    this.message = ‘已更新‘
    console.log(this.$el.textContent) // => ‘未更新‘
    await this.$nextTick()
    console.log(this.$el.textContent) // => ‘已更新‘
  }
}

我以项目中我的编写习惯举例

<script>
    export default{
        name:‘demo‘,
        data(){
           return {
    
           }
        },
        created(){
             this.getAjaxData()
             this.$nextTick(()=>{
                  this.getDomEl()
             })
        },
       methods:{
           getAjaxData(){
                 //获取后台数据
           }，
           getDomEl(){
            //需要获取DOM元素执行的函数；
            //或者放在mounted中执行的函数
           }
       }
    }

</script>        
                      

官网文档：注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

可以深入了解一下这个响应式原理的相关内容