面试题——异步更新dom你了解多少？

我们先来看一道题 (我的demo是基于vue3.2的)

下面能否获取最新值？如果不能有什么解决办法？

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <p ref="mydiv">{{msg}}</p>
    <button @click="handleAdd">获得又修改</button>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data () {
    return {
      msg: '获得并修改我这个内容'
    }
  },
  components: {

  },
  methods: {
    handleAdd () {
      this.msg = '获取了但未完全获取'
      console.log(this.$refs.mydiv.innerHTML)
    }
  }
}
</script>

我们来看浏览器

我们需要点击两次才可以正确的获取到正确的元素内容，这是为什么呢？

原因很简单，因为vue的更新是首先更新到虚拟dom的，第一次更新我们只是获取到旧的元素内容，然后新的元素内容在队列中，我们需要在进行一次点击才可以获取

如果我们想正确获取到最新的值，我们可以使用 Vue 提供的 nextTick , 他具体怎么用呢？

语法：this.$nextTick(callback)

他需要接入一个回调函数，那么我们在代码中做如下修改

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <p ref="mydiv">{{ msg }}</p>
    <button @click="handleAdd">获得又修改</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data () {
    return {
      msg: '获得并修改我这个内容'
    }
  },
  components: {},
  methods: {
    handleAdd () {
      this.msg = '效果不错，我这次获取到了最新的'

      this.$nextTick(() => {
        console.log(this.$refs.mydiv.innerHTML)
      })
    }
  }
}
</script>

我们再去看看浏览器

这样我们就解决了这个问题了。