一文带你搞懂vue中的this.$nextTick

时间：2025-05-16 08:47:11

文章目录

      • 1、(callback) 使用原理
      • 2、created和mounted对比
      • 3、例子说明
      • 4、实际遇到的问题：vue项目中 elementUI 中表格多选框默认选中，但没有生效
      • 5、使用场景

1、(callback) 使用原理

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

当你设置 = ‘new value’，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 (callback) 。这样回调函数在 DOM 更新完成后就会调用。

2、created和mounted对比

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

  • 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在()的回调函数中
  • 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进()的回调函数中。

3、例子说明

<div >
      <h1 >{{msg}}</h1>
      <button @click="change">点击</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello'
        },
        methods: {
          change() {

             = 'apple'
            // 如果直接这样打印，打印出来的结果不是我们想要的apple，而是hello，因为 = ‘apple’ 它是异步的
            // (('myh').innerText); 
            this.$nextTick(() => {
              (('myh').innerText)
            })
          }
        }
      })
    </script>

注意下面的代码，这里打印出来不是马上赋值后的apple，因为dom更新和数据赋值这两个操作是异步进行的，也就是虽然这里进行了 = 'apple'赋值，但是并没有马上同步执行dom更新，所以打印出来会是原来的hello

 = 'apple'
(('myh').innerText);

解决：使用this.$nextTick

this.$nextTick(() => {
 (('myh').innerText)
})

这样就可以等 = 'apple'对应的dom操作更新完成后，再去获取值，就能正常获取

所以！！！在数据变化( = 'apple')后要执行某个操作(('myh').innerText)，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进()的回调函数中。

4、实际遇到的问题：vue项目中 elementUI 中表格多选框默认选中，但没有生效

项目中，有个需求，我想要默认初始化选中当前页的所有多选框，结果没有生效

一开始的代码：

  toggleSelection(rows) {
          if (rows) {
            (row => {
              this.$(row);
            });
          }
        
      },

如果理解了上面的例子，这里就更好的理解了，因为我的表格是请求数据渲染出来的，那时候我的表格还没完全渲染完。就去操作this.$(row); 导致的，也就是可能对一个空的表格进行了选中操作，那当然没有生效

所以这里就要借用this.$nextTick

  toggleSelection(rows) {
        this.$nextTick(() => {
          if (rows) {
            (row => {
              this.$(row);
            });
          }
        })
      },

5、使用场景

1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

  created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$="created中更改了按钮内容";  //写入到DOM元素
    });
  },

2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进()的回调函数中； 通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

<template>
  <div class="hello">
    <h3 id="h">{{testMsg}}</h3>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //vue数据改变，改变dom结构
      let domTxt=document.getElementById('h').innerText;  //后续js对dom的操作
      console.log(domTxt);  //输出可以看到vue数据修改后DOM并没有立即更新，后续的dom都不是最新的
      if(domTxt==="原始值"){
        console.log("文本data被修改后dom内容没立即更新");
      }else {
        console.log("文本data被修改后dom内容被马上更新了");
      }
    },
 
  }
}
</script>

正确的用法是：vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码

    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //修改dom结构
       
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    },

3、在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

参考文章：
/zhouzuoluo/article/details/84752280
/louting249/article/details/104022350
/p/a7550c0e164f

相关文章