vue中nextTick()方法的使用学习

最新推荐文章于 2023-12-16 21:21:41 发布

人间草木96

最新推荐文章于 2023-12-16 21:21:41 发布

阅读量262

点赞数

分类专栏： vue 面试总结

本文链接：https://blog.csdn.net/qq_43258252/article/details/102562119

版权

Vue.nextTick()方法用于在DOM更新后执行回调，适用于数据变化后的DOM操作。在created钩子中进行DOM操作，或需要依赖数据变化后的DOM结构时，应将其放入nextTick的回调。其原理是异步更新队列，避免频繁DOM更新，提高性能。在数据变更后，DOM不会立即更新，而是在下一个事件循环中更新。通过Vue.nextTick(callback)，可在DOM更新后执行回调。

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

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

nextTick()是属于异步更新队列

应用场景

在Vue生命周期的created钩子函数进行的DOM操作一定要放在vue.nextTick()的回调函数中

在数据变化后要执行的某个操作，而这个操作需要使用随机数据改变而改变的DOM结构的时候，这个时候的操作都应该放进Vue.nextTick()的回调函数中。

demo例子

<template>
  <div class="index">
    <button id="firstBtn" @click="testClick()" ref="aa">{
  {msg}}</button>
  </div>
</template>

<script>

export default {
  name: 'index',
  data () {
    return {
      msg: '原始值'
    }
  },
  created () {

  },
  methods: {
    testClick () {
      this.msg = '修改后的值'
      console.log(this.$refs.aa.innerText) // this.$refs.aa获取指定DOM，输出：原始值
      this.$nextTick(() => {
        console.log(this.$refs.aa.innerText) // this.$refs