Vue中$nextTick的作用

最新推荐文章于 2024-07-24 11:11:41 发布

温柔于心动

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量605

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Frazier1995/article/details/116275079

版权

vue 专栏收录该内容

80 篇文章 4 订阅

订阅专栏

本文介绍了Vue.js中的Vue.nextTick方法，它用于确保DOM更新在下一个循环结束后执行，特别是在created和mounted钩子函数中处理DOM操作的重要性。通过实例展示了如何在实际开发中正确使用此技巧。

摘要由CSDN通过智能技术生成

概念：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，

Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新！

使用场景：

虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。

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

代码示例：

<template>
  <section>
    <div ref="box">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="lcClick">点我</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      lcClick() {
      }
    },
    mounted() {
      console.log(3);
      console.log(this.$refs['box']);
      this.$nextTick(() => {
        console.log(4);
        console.log(this.$refs['box']);
      });
    },
    created() {
      console.log(1);
      console.log(this.$refs['box']);
      this.$nextTick(() => {
        console.log(2);
        console.log(this.$refs['box']);
      });
    }
  }
</script>