Vue中this.$nextTick()方法的使用及代码示例

<template>
  <div>{{message}}</div>
</template>
<script>
  export default {
    data () {
      return {
        message: 'Hello Vue'
      }
    },
    methods: {
      updateMessage () {
        this.message = 'Updated Message'
        // 在 DOM 更新后操作 DOM
        this.$nextTick(() => {
          // 通过 DOM API 更新文本
          this.$el.textContent = 'DOM Updated!'
        })
      }
    }
  }
</script>

<template>
  <div ref="box">{{message}}</div>
</template>
<script>
  export default {
    data () {
      return {
        message: 'Hello Vue'
      }
    },
    methods: {
      logBoxInfo () {
        // 获取更新后的 DOM 节点信息
        this.$nextTick(() => {
          const box = this.$refs.box
          console.log(box.offsetWidth, box.offsetHeight)
        })
      }
    }
  }
</script>

<template>
  <div>Computed Value: {{computedValue}}</div>
</template>
<script>
  export default {
    data () {
      return {
        items: [1, 2, 3, 4, 5]
      }
    },
    computed: {
      computedValue () {
        // 执行复杂的计算
        const total = this.items.reduce((sum, val) => sum + val, 0)
        // 确保下一个 DOM 周期中更新视图
        this.$nextTick(() => {
          console.log(`Total: ${total}`)
        })
        return total
      }
    }
  }
</script>

// Parent.vue
<template>
  <div>
    <child ref="child"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  mounted () {
    // 等待子组件数据更新后再执行操作
    this.$nextTick(() => {
      this.$refs.child.doSomething()
    })
  }
}
</script>
// Child.vue
<template>
  <div>{{message}}</div>
</template>
<script>
export default {
  data () {
    return {
      message: 'Hello'
    }
  },
  methods: {
    doSomething () {
      this.message = 'Updated Message'
    }
  }
}
</script>

<template>
  <el-date-picker v-model="date"></el-date-picker>
</template>
<script>
export default {
  data () {
    return {
      date: null
    }
  },
  mounted () {
    // 等待 Element UI 组件初始化后再执行操作
    this.$nextTick(() => {
      this.$refs.picker.$el.querySelector('input').focus()
    })
  }
}
</script>

<template>
  <div>
    <input ref="input" v-model="message">
    <div>Message Length: {{messageLength}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  computed: {
    messageLength () {
      return this.message.length
    }
  },
  methods: {
    focusInput () {
      // 监听视图变化并执行相应操作
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    }
  },
  mounted () {
    this.focusInput()
  }
}
</script>

Vue.component('comp', {
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
});
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, World';
      console.log(this.$refs.comp.$el.textContent); // Hello
      this.$nextTick(() => {
        console.log(this.$refs.comp.$el.textContent); // Hello, World
      });
    }
  }
});