在使用组合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>
我们看到控制台里输出了
林哥
这节课能内容就是这些了。