vue3个人心得---（响应式初解）DOM 更新时机、nextTick()

DOM 更新时机

VUE为了减少响应次数，会让所有的DOM更新在一段代码的最后执行，如果一个响应对象先后多次赋值，也只在最后一次赋值后DOM更新。看代码如下：

<template>
 <h1 id="woai" v-text="state"></h1>       
 <button @click="ee">我来改变</button>  
</template>
<script setup>
import { ref,toRef } from 'vue';
  let obj = ref({name:5})
  let state = toRef(obj.value, 'name') 
  function ee(){state.value=8        
                state.value=10
console.log(document.getElementById("woai").textContent)}
</script>

如上代码在后台执行顺序如下：
1、state.value=8
2、state.value=10
3、console.log()
4、DOM更新
DOM更新会在最后执行，因此打印在DOM更新之前，此时打印是未更新的DOM。

强制DOM更新后执行nextTick()

针对DOM更新最后执行的VUE特性，推出nextTick()一个特例API，强制DOM更新后再执行，用法如下：

<template>
  <h1 id="woai" v-text="state"></h1>       
  <button @click="ee">我来改变</button>  
</template>
<script setup>
import { ref,nextTick,toRef } from 'vue'
   let obj = ref({name:5})
   let state = toRef(obj.value, 'name') 
   function ee(){state.value=8       
                 state.value=10
                 nextTick(() => {console.log(document.getElementById("woai").textContent)})}
</script>

nextTick函数的书写规范：nextTick(回调函数)
DOM更新后再执行的代码放在回调函数里，如下：
nextTick(() => {DOM更新后再执行的代码)})
nextTick位置不可随意
强制DOM更新后再执行并不意味着可以随意放置nextTick，如下：nextTick放置在响应性代码之前不会生效，我也不明所以。

<template>
  <h1 id="woai" v-text="state"></h1>       
  <button @click="ee">我来改变</button>  
</template>
<script setup>
import { ref,nextTick,toRef } from 'vue'
   let obj = ref({name:5})
   let state = toRef(obj.value, 'name') 
   function ee(){nextTick(() => {console.log(document.getElementById("woai").textContent)})
                 state.value=8       
                 state.value=10
                 }
</script>

nextTick嵌套
nextTick(() => {})可以嵌套，嵌套写在回调函数里
nextTick(() => {nextTick()})

nextTick(() => {
state.value=8
nextTick(() => {
console.log(document.getElementById("woai").textContent)
})})           最终打印的是8