Vue中的nextTick是什么？怎么用？

时间：2025-01-22 08:13:23

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

文章目录

  • 一、nextTick是什么？
  • 二、使用步骤
  • 三、使用场景
    • 1.初始化绑定或操作 DOM
    • 2.获取元素宽度
  • 总结

提示：vue是异步执行DOM更新的。vue实现响应式并不是数据发生改变之后DOM立即变化，而是按一定的策略进行DOM更新

一、nextTick是什么？

  • Vue 在监听到数据变化后会重新渲染，配合 VDOM 更新真实的 DOM，而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后.
  • nextTick将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

在vue中，并不是数据一更新，DOM就立即更新，页面立即渲染，而是当一个事件循环结束后，DOM才会完成更新，页面才会成功渲染；

如通过一个for循环改变一个数据，即使这个for循环100次，DOM也只会在第100次时才更新，而不是循环100次，DOM就更新100次。

二、使用步骤

代码如下（示例）：

//在该示例中，控制台会抛出一个innerHTML of null的错误，
//这是由于此时页面并未完成渲染，它并没有获取到这个div元素。

<div id=app>
  <div id="div" v-if="showDiv">我是显示文本</div>
  <button @click="showAndGetText">获取内容</button >
</div>
<script>
var app = new Vue({
  el: '#app',
  data () {
    return {
      showDiv : false
    },
    methods: {
      showAndGetText () {
        this.showDiv  = true
        let text = document.getElementById('div').innerHTML
        console.log(text)
      }
    }
  }
})
</script>

我们利用nextTick改造下这个method

通过this.$nextTick()调用的代码直接进入下一个tick，相对于下一个tick，当前tick中的DOM已完成更新。

代码如下（示例）：

showAndGetText () {
    this.showDiv  = true
    this.$nextTick(()=>{
        let text = document.getElementById('div').innerHTML
        console.log(text)
    }) 
}

//更改之后成功显示出这个div元素的文本信息

三、使用场景

常用于需要等待渲染完成后执行的一些方法

1.初始化绑定或操作 DOM

  • 比如在 created 和 mounted 回调中，需要操作渲染好的 DOM，则需要在 nextTick 中执行相关逻辑。

2.获取元素宽度

  • 在 Vue 中获取元素宽度有两种方式，第一种是通过 $refs[ref名称].，第二种可以使用传统操作 DOM 的方式获取，但这两者要获取到准确的元素宽度，则需要在 DOM 渲染完毕后执行。

代码如下（示例）：

<template>
<p ref="myWidth" v-if="showMe">{{ message }}</p> <button @click="getMyWidth">获取p元素宽度</button>
</template>
<script>
export default {
 data() {
 return {
  message: "Hello world!",
  showMe: false,
 },
 methods: {
  getMyWidth() {
  this.showMe = true;
  // = ;  //报错 TypeError:  is undefined 
  this.nextTick(()=>{
  //dom元素更新后执行，此时能拿到p元素的属性  
  //  = ; })
  }
 }
 }
}
</script>

总结

Vue 的设计理念并不建议我们去直接操作 DOM，但有些场景下出现了特别令人迷惑的问题，理解 Vue 的渲染逻辑后，使用 nextTick() 可以解决。

相关文章