[vue3新特性] 10.组合api——11.nextTick

在使用组合API中使用nextTick和我们之前学过的使用方式基本一样，只不过nextTick方法是导入的，而不是this中的

import { nextTick} from 'vue'

现在我们来写一个小例子，在修改了span标签的文字内容后，通过dom元素获取它的innerHTML，正好也复习一下之前学过的获取dom元素的方式

<template>
  <div>
    <span ref="textDom">{{ text }}</span>
  </div>
</template>

<script>
import { nextTick, onMounted, ref } from 'vue'
export default {
  name: 'App',
  setup() {
    const textDom = ref(null)   // 用于获取dom元素
    const text = ref('')

    onMounted(() => {
      text.value = '林哥'
      nextTick(() => {          // 在改变了dom以后，获取dom的innerHTML
        console.log(textDom.value.innerHTML)
      })
    })
    return {
      textDom,
      text,
    }
  },
}
</script>

我们看到控制台里输出了

林哥

这节课能内容就是这些了。